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的值相互比较。

请参见optimizing performance by skipping effects。

在使用中反应钩子道具

1 个答案: