在React函数组件中做定时增量加载，常见做法是每隔几秒从全量数据里用slice切一段追加渲染。但很多实现会出现状态不更新的情况，本质原因和函数组件的闭包机制以及setState的异步批处理有关。下面通过具体代码和问题分析，说明如何稳定地使用slice完成增量加载。
一、常见的错误写法与问题根源
开发者最容易写出类似下面的代码：在useEffect里启动setInterval，回调中直接读取state里的list，并用slice算出下一段然后调用setList。这种写法在首次渲染后，定时器闭包捕获的list永远是初始值，导致每次slice都从同一位置开始，界面看起来像不再更新。
这是因为函数组件的每次渲染都会形成新的作用域，setInterval的回调函数被创建时绑定了当时的list变量。React并不会在state变化后自动把旧闭包里的list替换成新值，所以定时器内部拿到的始终是过时的引用。即便调用了setList，下一次定时触发时读的还是老list，slice结果自然重复或停滞。
import React, { useState, useEffect } from 'react';
function BadList() {
const [list, setList] = useState([]);
const allData = Array.from({ length: 20 }, (_, i) => 'item-' + i);
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
// 错误：list是闭包里的旧值
const next = allData.slice(index, index + 5);
setList(list.concat(next));
setIndex(index + 5);
}, 2000);
return () => clearInterval(timer);
}, []);
return (
<ul>
{list.map((it, i) => <li key={i}>{it}</li>)}
</ul>
);
}
上面代码里index和list都被闭包固化，运行后会发现列表只追加了前5条就停止变化。这个误区非常典型，并不是slice本身有缺陷，而是状态读取方式违背了Hooks的渲染逻辑。
二、使用函数式更新解决state滞后
React的setState支持传入函数，该函数接收上一个状态作为参数，返回新状态。利用这一特性，我们可以彻底绕开闭包中的旧list问题。对于增量加载，只需在回调里用prev计算slice位置，就能保证每次都基于最新数据追加。
不过slice依赖当前已加载数量，我们可以用prev.length作为起点，也可以配合useRef保存游标。下面示例采用prev.length方式，逻辑清晰且不需要额外状态管理索引。
import React, { useState, useEffect } from 'react';
function GoodList() {
const [list, setList] = useState([]);
const allData = Array.from({ length: 20 }, (_, i) => 'item-' + i);
const pageSize = 5;
useEffect(() => {
const timer = setInterval(() => {
setList(prev => {
// 基于最新长度做slice，避免闭包旧值
const start = prev.length;
if (start >= allData.length) {
clearInterval(timer);
return prev;
}
const next = allData.slice(start, start + pageSize);
return prev.concat(next);
});
}, 2000);
return () => clearInterval(timer);
}, []);
return (
<ul>
{list.map((it, i) => <li key={i}>{it}</li>)}
</ul>
);
}
这种写法中，setList的更新函数由React在每次状态提交时调用，prev始终是当前真实的列表。slice从prev.length开始截取，就能稳定实现每两秒加载五条。优点是实现简单、不易出错；缺点是当allData很大时，slice每次都要从头计算长度，不过对一般分页场景影响可以忽略。
三、用useRef维护游标配合slice
如果业务需要更精确地控制加载批次，或者slice的起始点不仅依赖长度还依赖其他条件，使用useRef保存已加载索引会更直观。ref的值在组件生命周期内可变且不会触发渲染，非常适合做定时器里的游标。
下方代码用cursorRef记录已加载位置，定时器里读取ref.current做slice，并更新ref和state。这样既保留了slice的语义，又避免了任何闭包陷阱。
import React, { useState, useEffect, useRef } from 'react';
function RefList() {
const [list, setList] = useState([]);
const allData = Array.from({ length: 20 }, (_, i) => 'item-' + i);
const cursorRef = useRef(0);
const pageSize = 5;
useEffect(() => {
const timer = setInterval(() => {
const start = cursorRef.current;
if (start >= allData.length) {
clearInterval(timer);
return;
}
const next = allData.slice(start, start + pageSize);
cursorRef.current = start + pageSize;
setList(prev => prev.concat(next));
}, 2000);
return () => clearInterval(timer);
}, []);
return (
<ul>
{list.map((it, i) => <li key={i}>{it}</li>)}
</ul>
);
}
该方案将游标与渲染状态分离，ref负责逻辑计数，state负责视图渲染。即便后续增加暂停、限速等功能，也只需操作cursorRef。对比纯函数式更新，它更易于扩展，但多了ref概念，对新手理解成本稍高。
四、对比与选型建议
从实现复杂度看，函数式更新最简洁，适合数据量不大、加载规则简单的面板。useRef游标方案适合需要中途干预加载进度的场景，比如用户点击暂停后再恢复批次。
两者都解决了slice更新不及时的核心矛盾：即闭包内旧state引用。只要保证slice的起始值来自最新状态或稳定ref，而不是初次渲染的常量，定时增量加载就能正常工作。实际项目中推荐优先使用函数式更新，遇到复杂控制再引入ref。
| 方案 | 优点 | 缺点 |
|---|---|---|
| 函数式更新 | 代码少，无额外变量，不易出错 | 复杂游标逻辑时不够直观 |
| useRef游标 | 控制精确，易扩展暂停或跳转 | 需理解ref不触发渲染的特性 |
最后提醒，无论哪种方式，都应在定时器清理函数中clearInterval，防止组件卸载后继续设置状态导致内存泄漏。掌握了闭包与Hooks更新机制，slice就能成为函数组件里可靠的增量加载工具。