在使用中反应钩子道具

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]);

随着钩，阵营内部做这与使用的实施componentDidUpdate，我们要比较的价值prevProps和nextProps反目成仇。

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