React Native无限滚动拼接大数组致JS线程卡顿，最优解决方案是什么？

安全阿岳

2026-10-7

问题根因

当前卡顿核心源于Array.prototype.concat的不可变复制开销：每次调用concat都会完整遍历整个旧数组，生成一份全新的数组副本，时间复杂度为O(n)。当数组长度超过500后，全量复制的开销会直接阻塞JS线程，导致1秒左右的冻结。你已经使用了大列表组件做视图层优化，所以瓶颈完全在JS层的数组合并操作本身。

最优实现方案

分段式数据存储（首选方案）
不要将全量数据存在单个数组中，改为二维数组分段存储，每段存储固定数量（比如20条/页）的数据，合并时只需要追加新的分段即可，时间复杂度降低为O(1)：
```
// 状态初始化
const [data, setData] = useState([]); // 每个元素是一页数据的数组：[[page1数据], [page2数据], ...]

// 追加新页数据
setData(prev => [...prev, result]);
```
常用的大列表组件通常支持直接传入二维分段数据，就算不支持也可以在组件内部做扁平化的按需计算，不需要每次更新都全量扁平化整个数组，完全避免大数组复制开销。
单数组场景高效合并方案
如果必须使用一维数组存储全量数据，可以用扩展运算符替代concat，性能略高于concat，同时可以配合InteractionManager将合并操作放到线程空闲时执行，避免阻塞UI交互：
```
import { InteractionManager } from 'react-native';

// 追加数据逻辑
InteractionManager.runAfterInteractions(() => {
  setData(prev => [...prev, ...result]);
});
```
高频更新场景优化方案
如果你的翻页请求频率很高，可以用useRef存储全量数据，只在数据追加完成后触发一次状态更新，避免React内部对状态的中间校验开销：
```
const dataRef = useRef([]);
const [, forceUpdate] = useReducer(x => x + 1, 0);

// 追加数据逻辑
const appendData = (newData) => {
  dataRef.current.push(...newData);
  forceUpdate();
}
```
这种方式跳过了React状态的不可变复制步骤，性能最高，不过要注意不要在其他地方直接修改dataRef.current的数据，避免出现数据不一致的问题。