useEffect 仍然触发比较同一个对象？答案

【问题标题】：useEffect still trigger comparing the same object?useEffect 仍然触发比较同一个对象？
【发布时间】：2020-09-25 13:10:17
【问题描述】：

我的数据是一个有 2 个属性 {a: 1, b:2} 的对象，但我仍然可以看到重新渲染，尽管我的道具（数据）仍为 {a: 1, b:2}，useEffect 是否无法比较对象？

const MyComp = ({ data }) => {

useEffect(() => {
console.log('test')
}, [data])

return <div>something</div>
}

【问题讨论】：

【解决方案1】：

即使数据看起来相同，{a: 1, b:2}，它也可以是不同的对象。

考虑这个例子：

let data1 = {a:1, b:2}
let data2 = {a:1, b:2}
data1 == data2 // false!

但在这里，这是真的：

let data1 = {a:1, b:2}
let data2 = data1
data1 == data2 // true!

仅仅因为键相同并不意味着它是同一个对象。 React 比较的是对象，而不是对象内部的键。

【讨论】：

【解决方案2】：

@Viktor 已经解释了问题。

问题

React 将对每个值进行比较（通过Object.is）以确定是否应该调用您的效果回调。

问题在于，如果您需要为这些依赖项之一提供一个对象，并且该对象在每次渲染时都是新的，那么即使没有任何属性发生更改，您的效果仍然会被调用。

解决方案

1) 实现您自己的深度比较算法。为此，您可以使用 custom usePrevious hook (https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state) 获取之前的值，并与您的当前值进行深度比较。

2）或者，你可以简单地使用https://github.com/kentcdodds/use-deep-compare-effect（这是react的useEffect hook，除了对输入使用深度比较，而不是引用相等）

【讨论】：