React键值对对象状态更新时如何避免子组件不必要重渲染

问题根因 #

• 状态更新时未修改对应子项的引用：你当前的状态更新逻辑仅对外层keyValueObject做了浅拷贝，内层每个id对应的属性对象仍沿用原有引用，直接修改isChecked属性属于修改原状态的副作用操作，更新后对应子项的引用没有发生变化。
• React.memo的浅比较机制：默认情况下memo仅对组件props做浅比较，子组件接收的category属性对应修改后的对象引用与之前完全一致，因此memo判定无需重渲染，导致复选框状态不更新。

可行解决方案 #

1. 修正状态更新逻辑 #

修改父组件的handleStateChange更新逻辑，确保被修改的id对应子项生成新的引用，其余子项保留原有引用：

const handleStateChange = useCallback((id: number) => {
  setKeyValueObject(prev => {
    return {
      ...prev,
      // 仅修改对应id的子项，生成新的对象引用
      [id]: {
        ...prev[id],
        isChecked: !prev[id].isChecked
      }
    }
  })
}, [])

2. 保留子组件的memo包裹 #

子组件继续使用export default memo(ValueItem)导出即可：

• 未被点击的子项：category属性引用未发生变化，handleStateChange通过useCallback缓存引用也未变化，因此不会触发重渲染。
• 被点击的子项：category属性引用更新，触发单条子组件重渲染，复选框状态正常更新。

可选优化 #

如果嵌套层级更深，手动写展开运算符容易出错，可以引入immer库简化不可变更新写法，示例如下：

import { produce } from 'immer'

const handleStateChange = useCallback((id: number) => {
  setKeyValueObject(prev => produce(prev, draft => {
    draft[id].isChecked = !draft[id].isChecked
  }))
}, [])

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