react大列表更新时优化

大风起兮云飞扬丶2025-12-16 11:36

问题

在一个大列表中（有上百条数据），切每个item里的节点也很多。假如你要对某个item做更新操作（比如：单选），如果不做处理，每次更新将会更新所有item。

解决

可结合虚拟列表，进行首次渲染加速。

typescript 复制代码

	  const [updateItem,setUpdateItem] = useState(null);

xml 复制代码

      <div>
        {list.map(item=>{
          return <Item item={item} value={updateItem} onChange={()=>setUpdateItem(item)} updateItem={updateItem} />
        })}
      </div>

使用memo缓存节点，避免每个节点都更新

typescript 复制代码

	const Item = () => {
	  return <div>...大量节点</div>;
	};
	
	const areItemPropsEqual = (prevProps, nextProps) => {
	  if (nextProps.updateItem?.id === nextProps.item?.id) return false;
	  return prevProps.updateItem?.id !== nextProps.item?.id;
	};
	
	export default memo(Item, areItemPropsEqual);