React对象数组状态更新触发全量子组件重渲染的memo化问题咨询

解决方法 #

1. 修正state的不可变更新逻辑 #

你遇到的memo失效问题核心原因大概率是更新data状态时，全量替换了数组内所有对象的引用，导致未修改的子组件收到的props引用也发生了变化。更新时仅修改目标项的引用即可，示例代码如下：

// 示例：更新指定id对应项的values
const updateItemValues = (targetId, newValues) => {
  setData(prev => prev.map(item => {
    // 仅匹配到目标id时才返回新对象，其余项直接复用原有引用
    if (item.id === targetId) {
      return {
        ...item,
        values: newValues
      }
    }
    return item
  }))
}

此写法下未被修改的项的所有属性引用都和之前完全一致，React.memo默认的浅比较就能生效。

2. 按需添加React.memo自定义比较逻辑 #

如果你的业务场景中可能出现values引用变化但内容完全不变的情况，可以给DataForm的memo方法传入第二个自定义比较参数，跳过不必要的重渲染：

import { memo } from 'react'
// 若values是复杂结构数组，可替换为lodash.isEqual等深比较方法
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b)

const DataForm = memo(({ id, values }) => {
  // 组件原有逻辑
}, (prevProps, nextProps) => {
  // 返回true表示props无变化，不需要重渲染
  return prevProps.id === nextProps.id && isEqual(prevProps.values, nextProps.values)
})

3. 补充列表渲染的唯一key #

你当前的列表渲染没有添加key属性，这也会导致React无法正确复用组件节点，修改渲染代码如下：

{data.map((val) => {
  return <DataForm key={val.id} {...val} />;
})}

可选优化：用useMemo缓存组件列表 #

如果DATA_SIZE非常大，可以额外用useMemo缓存生成的组件列表，减少每次render时的遍历开销：

const dataFormList = useMemo(() => {
  return data.map(val => <DataForm key={val.id} {...val} />)
}, [data])

// 渲染时直接使用
{dataFormList}

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