react useEffect 是浅比较监听数据变化

useEffect 默认不会对对象进行深度监听，而是通过浅比较（shallow comparison）判断依赖项是否变化，即仅比较对象的引用地址而非内部属性值。以下是详细解析和解决方案：

---

1. 默认行为：浅比较机制

• 原理：useEffect 使用 Object.is 或 === 比较依赖项的引用地址。若对象引用未变（即使属性变化），不会触发副作用。

  const [obj, setObj] = useState({ a: 1 });
  useEffect(() => {
    console.log("对象变化"); // 不会执行，除非引用地址改变
  }, [obj]);
  

---

2. 深度监听的实现方案

(1) 拆解对象属性

• 适用场景：仅需监听特定属性时。

  useEffect(() => {
    console.log("属性a变化");
  }, [obj.a]); // 直接监听基本类型属性
  

(2) 使用深比较工具（如 lodash/isEqual）

• 方法：通过 useRef 存储旧值，手动比较对象内容。

  import { isEqual } from 'lodash';
  const prevObjRef = useRef(obj);
  useEffect(() => {
    if (!isEqual(prevObjRef.current, obj)) {
      console.log("对象内容变化");
      prevObjRef.current = obj;
    }
  }, [obj]); // 依赖项仍需传入对象以触发比较
  

(3) 自定义 Hook 封装

• 优化性能：避免每次渲染都进行深比较。

  function useDeepCompareEffect(effect, deps) {
    const prevDeps = useRef(deps);
    if (!isEqual(prevDeps.current, deps)) {
      prevDeps.current = deps;
    }
    useEffect(effect, [prevDeps.current]);
  }
  

(4) 不可变更新对象

• 强制引用变化：更新对象时返回新引用。

  setObj(prev => ({ ...prev, a: 2 })); // 新引用触发useEffect
  

---

3. 性能与注意事项

• 深比较开销：频繁深比较可能影响性能，建议仅监听必要属性。
• 引用类型陷阱：嵌套对象或数组需递归比较，可结合 useMemo 缓存对象。
• 替代方案：复杂状态管理优先考虑 useReducer 或状态管理库（如 Redux）。

---

总结

• 默认浅比较：useEffect 不深度监听对象，需主动处理。
• 推荐方案：
  • 简单场景：拆解属性监听。
  • 复杂场景：深比较工具或不可变更新。
  • 性能敏感：自定义 Hook 或状态管理优化。