React中如何避免组件不必要重渲染？附具体代码场景问题

问题根因 #

React默认渲染规则为：父组件触发重渲染时，所有嵌套子组件都会无条件跟随重渲染，和子组件自身props是否发生变更无关联。你当前场景中value状态更新触发Parent组件重渲染，即便Child2接收的setValue引用未发生变化，也会被默认逻辑带动重渲染。

修复方案 #

使用React.memo高阶组件包裹Child2即可。React官方保证useState返回的状态更新函数在组件整个生命周期内引用完全稳定，无需额外处理即可满足React.memo的浅比较校验要求，props无变化时会直接跳过Child2的重渲染：

// 用React.memo包裹Child2组件定义
const Child2 = React.memo(({ setValue }) => {
  // 原有组件逻辑保持不变
  return <button onClick={() => setValue('新值')}>修改状态</button>
})

扩展提示：如果后续需要给子组件传递自定义函数、普通对象类型的props，需要配合useCallback（处理函数类型）、useMemo（处理对象/计算值类型）保证props引用稳定，否则React.memo的浅比较会判定props发生变化，依然会触发重渲染，参考示例：

const Parent = () => {
  const [value, setValue] = useState('');
  // 用useCallback包裹自定义函数，依赖项不变时返回的函数引用不变
  const formatAndSetValue = useCallback((input) => {
    setValue(input.trim())
  }, [setValue])

  return <>
    <Child1 value={value} />
    <Child2 setValue={formatAndSetValue} />
  </>
}

const Child2 = React.memo(({ setValue }) => {
  // 组件逻辑保持不变
})

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