为什么useEffect在听道具的时候第一次运行

Question

我承认我可能永远不会理解钩子，但这种断言是否正确，即基于道具的useEffect应该只在道具更改时运行？在下面的代码中，两个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>
);
}

样本代码

Answer 1

您似乎误解了钩子的工作原理。官方挂钩效应文件指出：

每次渲染后是否运行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 ]);