反应钩子道具在使用效果

Question

我已经开始使用react-hooks，有些东西我试图理解。我有这个useEffect钩子，我正在分离我的useEffect钩子，我想知道每个钩子什么时候运行。

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

这个钩子只会在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]);

对于钩子，React 在内部执行此操作，这与使用 componentDidUpdate 的实现不同，我们必须比较 prevProps 和 nextProps 的值。

请参阅通过跳过效果来优化性能。