React中新增列表元素时如何避免整个列表re-render

问题根因 #

key属性的作用仅在虚拟DOM Diff阶段帮React识别哪些节点可以复用，避免不必要的DOM重建，并没有阻止组件重渲染的能力。
你当前的场景下，新增元素会触发列表所在的父组件状态更新，父组件重渲染时，内部所有未做渲染优化的子组件（也就是你的列表项组件）都会默认触发重渲染，这就是你看到所有列表项都打印日志的原因。

具体优化步骤 #

1. 用React.memo包裹列表项组件 #

React.memo是React提供的高阶组件，会对传入组件的props做浅比较，如果props没有变化就跳过组件的重渲染：

// 改造前列表项组件
const ListItem = ({ itemData }) => {
  console.log("列表项渲染", itemData.id);
  return <li>{itemData.content}</li>;
};

// 改造后
const ListItem = React.memo(({ itemData }) => {
  console.log("列表项渲染", itemData.id);
  return <li>{itemData.content}</li>;
});

2. 保证传入列表项的props引用稳定 #

如果传给列表项的props包含函数、对象这类引用类型的值，需要额外处理避免每次父组件渲染时生成新的引用，导致React.memo的浅比较失效：

• 函数类型props用useCallback包裹，固定引用
• 对象/数组类型props用useMemo包裹，固定引用
  示例：给列表项传递点击事件的正确写法

function App() {
  const [list, setList] = useState([]);
  // 用useCallback包裹点击函数，确保引用不变
  const handleItemClick = useCallback((itemId) => {
    // 点击逻辑
  }, []);

  return (
    <ul>
      {list.map(item => (
        <ListItem 
          key={item.id} 
          itemData={item} 
          onItemClick={handleItemClick} 
        />
      ))}
    </ul>
  )
}

补充说明 #

• key属性依然需要正确配置，建议用列表项的唯一业务id作为key，不要用数组索引，保证Diff阶段的性能最优
• 如果列表项的props存在深层嵌套的对象，浅比较无法识别是否变化时，可以给React.memo传入第二个自定义比较函数，自行实现props的比对逻辑。

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