React useEffect deps being called

Question

设置如下效果:

React.useEffect(() => {
if (!maximumTocAttemptsExceeded) {
if (!isLoading) {
console.log('Here I need to reach');
}
}
}, [isLoading, error]);

我的疑问是:

如果error值(每次呈现组件时作为道具出现)发生变化，会执行useEffect吗?但我没有在useEffect中使用它的值。而且，maximumTocAttemptsExceeded也来自props，我需要把它作为钩子的依赖项吗?

我的useEffect被触发的次数比我需要的要多。它应该只在定义了error时执行

Answer 1

如果这是你需要运行的效果:

if (!maximumTocAttemptsExceeded) {
if (!isLoading) {
console.log('Here I need to reach');
}
}

你只添加maximumTocAttemptsExceeded和isLoading到您的依赖数组

为什么?

因为React会一直保持你的效果是最新的。所以如果你正在使用这些变量，React会假设如果其中一个变量改变了，它应该重新运行你的效果代码，这样你就会在你的组件上得到一个最新的效果。

如果error对你的效果代码有任何影响，你应该使用它，并将它添加到依赖数组中。

的例子:

React.useEffect(() => {
if (error) {
if (!maximumTocAttemptsExceeded) {
if (!isLoading) {
console.log('Here I need to reach');
}
}
}
}, [isLoading, error,maximumTocAttemptsExceeded]);

请注意，React只对这些参考值进行浅层比较。因此，如果依赖数组中的任何变量是在每次渲染时被重新创建的对象或数组，那么你的效果将在每次渲染时运行。因为尽管这些对象的内容可能与之前呈现的内容相同，但它们的引用在重新创建时发生了变化。所以，如果你的效果依赖于一个对象的属性，你应该只使用它，并将它添加到依赖数组中作为obj.prop，这样React就会知道你依赖于对象的单个prop，而不是整个对象。