React中处理useEffect依赖多属性对象避免重渲染的最佳实践

当组件接收的props是包含大量属性的对象，且副作用依赖整个对象时，直接把对象放进useEffect依赖数组会因为对象引用变化触发不必要重渲染，这里提供几种实用解决方案：

1. 在父组件缓存对象引用 #

如果父组件每次渲染都会创建新的obj对象（比如直接在render逻辑里定义），最根本的解决办法是在父组件用useMemo缓存这个对象，只有当对象的实际属性变化时才更新引用：

// 父组件
const Parent = () => {
  const [state1, setState1] = useState(0);
  // 缓存obj，仅当依赖的属性变化时重新创建
  const cachedObj = useMemo(() => ({
    property1: state1,
    property2: { val1: 100 },
    // ...其他98个属性
  }), [state1]); // 只依赖实际会变化的属性

  return <Component obj={cachedObj} />;
};

这样子组件的obj引用只会在实际属性变化时更新，从源头避免无意义的重渲染。

2. 使用useRef跟踪对象属性变化 #

如果无法在父组件缓存，或者需要在当前组件判断对象的实际属性是否变化，可以用useRef保存上一次的属性快照，在副作用里手动对比：

const Component = ({ obj }: Props) => {
  const prevObjRef = useRef<Props['obj']>(obj);

  useEffect(() => {
    // 手动对比所有属性（也可只对比关键属性）
    const isEqual = Object.keys(obj).every(key => {
      // 嵌套对象需深对比，简单场景可用JSON.stringify，复杂场景建议用lodash.isEqual这类工具
      return JSON.stringify(obj[key as keyof typeof obj]) === JSON.stringify(prevObjRef.current[key as keyof typeof obj]);
    });

    if (!isEqual) {
      someFunc(obj);
      prevObjRef.current = obj; // 更新快照
    }
  }); // 依赖数组为空，组件挂载/更新时执行判断
};

注意：JSON.stringify的对比有局限性（比如属性顺序、函数、Symbol类型会影响结果），复杂嵌套对象建议用成熟的深对比工具函数。

3. 自定义深对比useEffect钩子 #

可以封装一个useDeepCompareEffect替代原生useEffect，它会对依赖数组进行深对比而非浅对比：

import { useEffect, useRef } from 'react';
import isEqual from 'lodash.isEqual';

const useDeepCompareEffect = (effect: () => void, dependencies: any[]) => {
  const prevDependenciesRef = useRef<any[]>([]);

  useEffect(() => {
    if (!isEqual(prevDependenciesRef.current, dependencies)) {
      effect();
      prevDependenciesRef.current = dependencies;
    }
  }, [dependencies, effect]);
};

// 使用示例
const Component = ({ obj }: Props) => {
  useDeepCompareEffect(() => {
    someFunc(obj);
  }, [obj]);
};

注意：深对比会带来一定性能开销，仅在必要时使用；需确保已安装lodash.isEqual依赖。

4. 让someFunc接收具体属性而非整个对象 #

如果someFunc实际上只用到obj里的部分属性，哪怕数量较多，也可以用useMemo提取这些属性组成新的依赖数组，避免依赖整个对象：

const Component = ({ obj }: Props) => {
  // 提取someFunc需要的属性，组成精准依赖项
  const funcDependencies = useMemo(() => [
    obj.property1,
    obj.property2.val1,
    // ...其他需要的属性
  ], [obj.property1, obj.property2.val1 /* ... */]);

  useEffect(() => {
    someFunc(obj);
  }, funcDependencies);
};

这种方式虽然需要列出属性，但比解构全部100个属性更有针对性，能精准控制副作用的触发时机。

内容的提问来源于stack exchange，提问作者Pytan