JS中Spread Operator性能优化：大数据量数组状态更新提速方案

你遇到的核心问题是：每次用[...oldState, newItem]更新状态时，都会完整复制整个旧数组。当数组元素数量很大时，这种全量复制的开销会直接导致状态更新延迟，进而影响交互响应速度。

下面是几个实用的优化方案：

1. 批量更新元素，减少数组复制次数 #

不要每次添加单个元素就触发状态更新，而是先收集一批新元素，一次性合并到旧数组中。这样只需要执行一次数组复制操作，而不是多次。

示例代码：

// 收集多个待添加的元素
const batchItems = [newItem1, newItem2, newItem3];
// 一次性合并更新
setState(prevState => [...prevState, ...batchItems]);

如果是用户连续触发添加操作（比如多次点击按钮），可以用防抖函数合并请求：

const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

const addItemsBatch = debounce((newItems) => {
  setState(prev => [...prev, ...newItems]);
}, 300);

// 每次点击时先收集元素，防抖后批量更新
const handleAdd = (newItem) => {
  addItemsBatch([newItem]);
};

2. 使用Immer实现结构共享的不可变更新 #

Immer是专门处理不可变数据的库，它允许你用“看起来修改原数组”的写法，内部自动生成新的不可变数组，并且只复制被修改的部分（结构共享），避免全量复制大数组。

示例代码：

import { produce } from 'immer';

// 更新状态时用produce包裹
setState(produce(prevState => {
  // 直接调用push，Immer会处理成不可变更新
  prevState.push(newItem);
}));

这种方式性能提升明显，因为大数组中未被修改的部分会直接复用原引用，不需要复制。

3. 用虚拟列表减少重渲染开销 #

如果数组需要渲染到页面上，即使状态更新变快，大数组的全量重渲染也会导致页面卡顿。这时候可以用虚拟列表库（比如react-window），只渲染当前可见区域的元素，大幅减少DOM操作和重渲染的开销。

示例思路：

import { FixedSizeList } from 'react-window';

const RenderRow = ({ index, style }) => {
  const item = data[index];
  return (
    <div style={style}>
      {item.name}
    </div>
  );
};

// 页面上只渲染可见的元素
<FixedSizeList
  height={500}
  itemCount={data.length}
  itemSize={50}
>
  {RenderRow}
</FixedSizeList>

虚拟列表会让状态更新后的重渲染成本几乎可以忽略，即使数组很大，交互也会很流畅。

4. 避免不必要的组件重渲染 #

确保使用数组的组件只在数组真正变化时才重渲染。可以用React.memo包裹组件，或者用useMemo缓存数组的衍生数据：

示例代码：

// 用React.memo包裹子组件，浅比较props变化
const ItemList = React.memo(({ data }) => {
  return (
    <div>
      {data.map(item => <Item key={item.id} item={item} />)}
    </div>
  );
});

// 或者用useMemo缓存数组的处理结果
const processedData = useMemo(() => {
  return data.map(item => ({ ...item, displayName: item.name.toUpperCase() }));
}, [data]);

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