Question

如果依赖性从不改变，为什么会在每个渲染器上触发以下useEffect？

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

Answer 1

使用严格相等性检查依赖项数组的

每一项。这意味着它将使用===运算符。

因此它检查是否oldDeps[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是正确的，因为两个变量都引用相同的数组。

通常，由于这个原因，您不想将数组构造为hook依赖项之一。如果您有ID列表，则可以执行类似将其转换为字符串的操作：

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

之所以可行，是因为字符串与相同内容严格相等：

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