React：修改父组件state时如何避免子组件不必要重渲染？

1. 用React.memo包裹子组件 #

React.memo会对组件的props做浅比较，只有当props真正发生变化时才触发重渲染。如果子组件接收的是基本类型props（字符串、数字、布尔值），直接用memo包裹就能过滤掉无意义的重渲染：

const ChildComponent = React.memo(({ value, onChange }) => {
  useEffect(() => {
    // 基于value的业务逻辑
    if (someCondition) {
      onChange(newValue);
    }
  }, [value, onChange]);

  return <div>{value}</div>;
});

注意：如果传递的是对象、数组、函数这类引用类型props，浅比较会默认判定为新值，这时需要配合useCallback或useMemo一起使用。

2. 用useCallback缓存父组件传递的回调函数 #

父组件重渲染时，普通定义的回调函数会被重新创建，导致子组件的onChange props变化，触发子组件重渲染。用useCallback缓存回调函数，确保只有当依赖项变化时才生成新函数：

const ParentComponent = () => {
  const [value, setValue] = useState(0);
  
  // 缓存回调，依赖项为setValue（React内置函数，稳定性有保障）
  const handleChange = useCallback((newValue) => {
    setValue(newValue);
  }, [setValue]);

  return <ChildComponent value={value} onChange={handleChange} />;
};

3. 拆分父组件state，减少无关props传递 #

如果父组件的state包含多个字段，但子组件只用到其中一部分，拆分state可以避免子组件因无关字段变化而重渲染：

// 拆分前：单一state包含多字段，任意字段变化都会触发子组件props更新
const [state, setState] = useState({ value: 0, other: 'xxx' });

// 拆分后：独立维护各state字段
const [value, setValue] = useState(0);
const [other, setOther] = useState('xxx');

// 子组件仅接收value相关props，other字段变化不会影响子组件
return <ChildComponent value={value} onChange={setValue} />;

4. 在子组件中添加条件判断，避免无意义的state更新 #

如果子组件修改父组件state的操作是冗余的（比如新值和当前父state值完全相同），可以先做判断再执行更新，从源头避免父组件重渲染：

useEffect(() => {
  const newValue = calculateNewValue(value);
  // 仅当新值与当前值不同时，才触发父组件state更新
  if (newValue !== value) {
    onChange(newValue);
  }
}, [value, onChange]);

5. 用useMemo缓存传递给子组件的复杂props #

如果需要传递给子组件的是对象、数组这类引用类型，用useMemo缓存，确保只有当依赖项变化时才生成新的引用：

const ParentComponent = () => {
  const [value, setValue] = useState(0);
  
  // 缓存对象类型props，依赖项为value
  const childProps = useMemo(() => ({
    value,
    relatedData: { key: value, label: `Item ${value}` }
  }), [value]);

  return <ChildComponent {...childProps} onChange={handleChange} />;
};

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