时间戳

首页 > 解决方案 > 为什么将静态依赖项传递给 useEffect 会导致每次渲染都调用它？

reactjs - 为什么将静态依赖项传递给 useEffect 会导致每次渲染都调用它？

问题描述

如果依赖项永远不会改变，为什么在每次渲染时都会触发以下 useEffect ？

useEffect(() => {
   console.log('Here')
}, [['1', '2', '3']]);

标签： reactjsreact-hooksuse-effect

解决方案

使用严格相等检查依赖数组的每一项。这意味着它使用===运算符。

所以它检查 ifoldDeps[0] === newDeps[0]然后检查oldDeps[1] === newDeps[1]，依此类推。如果这些检查中的任何一个为假，它将执行效果。

最后，两个包含项目的数组并不严格相等：

[1,2,3] === [1,2,3] // false

const a = [1,2,3]
const b = a
a === b // true

这是因为它们是两个不同的数组，它们恰好包含相同的内容。但是在上面的代码中，a === b是真的，因为两个变量都引用了同一个数组。

通常，出于这个原因，您不希望将数组构造为钩子依赖项之一。如果你有一个 id 的列表，你可以做一些事情，比如将它转换为一个字符串：

}, [[1,2,3].join('-')]);

这是有效的，因为字符串与相同的内容严格相等：

"1-2-3" === "1-2-3" // true

推荐阅读