Question

我承认我可能永远不会理解钩子，但是这个断言是否正确，即基于prop的useEffect仅在prop更改时才运行？在以下代码中，两个useEffects都在第一次渲染comp时运行。为什么？

function Comp() {
  const [search, setSearch] = useState();

  useEffect(() => {
    console.log("this should run once on comp load")
  }, [])
  
  useEffect(() => {
    console.log("this should only run if search prop changes")
  }, [search])

  return (
    <div>

    </div>
  );
}

Sample Code

Answer 1

似乎您误解了挂钩的工作原理。 hook effect官方文档指出：

useEffect是否在每次渲染后运行？是！默认情况下，它在第一次渲染和之后都在每次更新后运行。 ...

因此，所有useEffect挂钩都将在第一个渲染上运行。通过将search依赖项添加到您的挂钩中，您仅表示该挂钩应另外在search的每次更改上运行。

如果要在第一个渲染上禁用钩子效果的功能，则可以构造一个自定义钩子，该钩子使用useRef钩子有条件地阻止useEffect的初始运行：

const useDidUpdate = (callback, dependencies) => {
  const didMountRef = useRef(false);
  
  useEffect(() => { // block first call of the hook and forward each consecutive one
    if (didMountRef.current) { 
        callback();
    } else {
        didMountRef.current = true;
    }
  }, dependencies);
};

然后您将其命名为：

useDidUpdate(() => {
    console.log("this should only run if search prop changes")
}, [ search ]);

为什么useEffect即使在听道具时也第一次运行？

1 个答案: