如何在 React 中正确地使用 useEffect 来监听一个深层嵌套对象的变化？

如何在 React 中正确地使用 useEffect 来监听一个深层嵌套对象的变化？

在 React 中，useEffect 默认通过 Object.is 对依赖项进行浅比较，因此当依赖的是一个深层嵌套对象时，即使内部属性发生变化，只要对象引用未变，useEffect 也不会重新执行。为正确监听深层变化，可以采用以下方法之一：

1. 使用 useMemo 缓存对象并确保引用变化：在对象构造时使用 useMemo，只有当内部值变化时才返回新引用。
2. 将深层属性提取为独立依赖项：例如，如果监听 obj.a.b，就将 obj.a.b 单独作为依赖。
3. 使用自定义比较函数 + useRef：通过 useRef 保存上一次的值，结合 JSON.stringify 或 lodash 的 isEqual 手动判断深层变化。

示例（方法2）：

useEffect(() => {
  console.log('obj.a.b changed');
}, [obj.a.b]); // 确保 obj 和 obj.a 不为 undefined

示例（方法3）：

const prevObjRef = useRef();
useEffect(() => {
  if (!isEqual(prevObjRef.current, obj)) {
    console.log('obj deeply changed');
    prevObjRef.current = obj;
  }
});

注意：频繁使用 JSON.stringify 或深层比较可能影响性能，应谨慎使用。最佳实践是尽量扁平化状态结构，避免过度嵌套。