reactjs - 在 useEffect 中 react 钩子(Hook) Prop

Question

我已经开始使用 react-hooks 并且有一些东西我想理解。我有这个 useEffect 钩子(Hook)，我正在分离我的 useEffect 钩子(Hook)，我想知道每个钩子(Hook)何时运行。

function MyComp(props) {
    useEffect(
       () => {
         fetchSomeData(props.filters)
       },[props.filters]
     )
    return (
        <div>will show my data here</div>
     )
}

此钩子(Hook)仅在 props.filters 更改时运行吗？

或者我是否必须使用 prevProps 来检查它是否已更改？

像这样:

function MyComp(props) {
   const prevProps = useRef(props);
   useEffect(
       () => {
           if (prevProps.filters !== props.filters) {            
              fetchSomeData(props.filters)
           }
       },[props.filters]
   )
   return (
     <div>will show my data here</div>
   )
}

Answer 1

如果 props.filters 的值没有改变，那么 React 将跳过该效果。

// This will only re-run if the value of `props.filters` changes
useEffect(() => {
  fetchSomeData(props.filters);
}, [props.filters]);

使用钩子(Hook)，React 在内部执行此操作，这与使用 componentDidUpdate 的实现不同，我们必须将 prevProps 和 nextProps 的值相互比较.

参见optimizing performance by skipping effects .