（深吸一口气，调整了一下虚拟领带，拿起一支荧光笔）
大家好，欢迎来到今天的“React 性能调优大逃杀”。我是你们的主讲人，一个在这个由 div 和 state 构成的混沌宇宙中寻找秩序的资深老司机。
今天我们要聊的话题，可能会让很多前端开发者的肾上腺素飙升，也可能让他们的浏览器直接变成蓝色的屏幕。这话题听起来有点枯燥，但我保证，这绝对是“干货”与“惊吓”并存的一堂课。
主题：React 驱动的大规模列表：利用 Time Slicing 处理非均匀高度计算
想象一下，你的产品经理拍着桌子对你说：“老板说了，我们要展示10万张用户上传的图片，做成一个瀑布流布局，而且要支持无限滚动！”
在那一刻，你的手在颤抖。你的直觉在尖叫：“去死吧，产品经理，我的 CPU 要炸了！”
为什么会这样？因为在浏览器这个狭窄的厨房里，一次性把10万个巨大的 DOM 节点扔进去，就像是在一个微波炉里同时炸了10吨土豆。浏览器会崩溃，你的用户会看到白屏，你的职业生涯可能会就此终结。
今天，我们要用一种高级武器的概念——Time Slicing（时间切片），来驯服这只名为“非均匀高度列表”的野兽。
第一章：当“自动高度”变成“不定身术”
首先，让我们直面问题。普通的列表渲染很简单。假设你有100个 <div>，每个高度100px。
// 平庸的实现，适合小学生
{items.map(item => (
<div key={item.id} style={{ height: 100 }}>
{item.content}
</div>
))}这就像是在玩俄罗斯方块，每个方块都是固定的，浏览器知道把下一个方块放在哪，滚动条也是乖宝宝，老实待着。
但瀑布流（Masonry）或者包含富文本、不同尺寸图片的列表就不一样了。有的卡片只有20px高，有的有800px高。就像一群穿着不同尺码舞鞋的舞者在舞台上跳舞。
当你渲染这10万行数据时，浏览器面临一个巨大的数学难题：我不知道下一行到底有多高！
这导致了两个经典的 Bug：
- 布局抖动： 滚动条像个抽筋的癫痫病人一样疯狂跳动。
- 渲染阻塞： 浏览器的主线程（那个负责干活的厨师）被卡住了。当你试图滚动列表时，页面卡顿得像是在播放 GIF 图片。
所以，我们要做的不仅仅是渲染，我们要学会欺骗和分治。
第二章：Time Slicing 是什么鬼？
Time Slicing，翻译过来就是“时间切片”。听起来很科幻，其实原理非常接地气。
试想一下，你有一整块巨大的蛋糕（我们的数据列表），你不能一口吞下去，否则会噎死。你要做的是，切一小块（比如100ms的处理时间），吃下去，休息一下，然后切下一块。
在 React 的世界里，这意味着：不要一次性渲染所有组件，而是利用浏览器的空闲时间，分批次渲染组件。
这就像是给 React 组件安排了“弹性工作时间”。主线程处理完用户的点击事件，发现没事干了，于是对 React 说：“嘿，兄弟，有空吗？帮我渲染点 DOM 吧。”
React 说：“来吧，但我只渲染500ms，太累了我要休息。”
这种机制能保证我们的应用始终保持响应。即使是在处理那个可怕的10万行列表时，用户依然可以点击按钮、输入文字，而不是眼睁睁看着页面变成静态图片。
第三章：如何“欺骗”浏览器计算高度？
这有个技术难点。Time Slicing 往往用于处理计算密集型任务，但列表渲染是 DOM 渲染。
如果列表高度是不固定的，我们在切片渲染时，如果不知道确切高度，就无法计算 scrollTop 和 scrollHeight，浏览器甚至不知道应该显示哪一行。
这里有三个策略，等级从新手到大师：
- 策略 A：所有项目瞬间渲染。（这会导致卡顿，放弃。）
- 策略 B：预估高度。（比如全部假设为100px，但这会让列表看起来乱七八糟。）
- 策略 C：预计算 + 切片渲染。（大师路线。）
我们的目标是策略 C。
步骤 1： 在开始切片渲染前，快速遍历一遍数据，计算每一项的精确高度。这通常是同步的，因为我们只是在读取数据模型，没有操作 DOM。
步骤 2： 计算出总高度 totalHeight。
步骤 3： 使用 requestIdleCallback 进行切片渲染。
第四章：实战演练——打造你的 Infinite Time-Sliced List
好了，理论讲够了，现在我们要动真格的。我为你准备了一个名为 useTimeSlicedList 的自定义 Hook。
这个 Hook 的核心思想是：只渲染可视区域，并在空闲时间处理剩余内容。
为了简化演示，我们假设数据是异步加载的，或者是一次性生成在内存里的。
4.1 准备工作
首先，我们需要一个工具函数来计算高度。为了演示方便，我们假设这里有一个函数 getItemHeight，它返回一个随机高度（模拟非均匀数据）。
4.2 核心逻辑代码
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 模拟一个获取项目高度的函数，实际项目中可能是根据 DOM 计算的
const getItemHeight = (index) => {
// 模拟不同的高度：有的短，有的长
return Math.floor(Math.random() * 300) + 50;
};
const useTimeSlicedList = (totalItems) => {
const [items, setItems] = useState([]); // 存储已经渲染的项目数据
const [scrollHeight, setScrollHeight] = useState(0);
const [scrollTop, setScrollTop] = useState(0);
const [isFinished, setIsFinished] = useState(false);
const totalHeightRef = useRef(0);
const containerRef = useRef(null);
const isMountedRef = useRef(true);
// 1. 预计算高度 (主线程快速任务)
useEffect(() => {
if (totalItems <= 0) return;
// 我们先计算所有项的总高度，作为锚点
// 注意：在实际应用中，如果数据量极大，这里的计算可能也需要优化，
// 但通常这比渲染10万个DOM节点要快得多。
let heightSum = 0;
for (let i = 0; i < totalItems; i++) {
heightSum += getItemHeight(i);
}
if (isMountedRef.current) {
totalHeightRef.current = heightSum;
setScrollHeight(heightSum);
}
}, [totalItems]);
// 2. 核心渲染循环：Time Slicing
const renderNextBatch = (startIndex, remainingBudget) => {
if (!isMountedRef.current) return;
const now = performance.now();
const BATCH_SIZE = 100; // 每次切片渲染的数量
const BATCH_DURATION = 20; // 每次切片的时间预算 (毫秒)
let currentIndex = startIndex;
let itemsToAdd = [];
// 我们要在这个切片里尽可能多渲染
while (currentIndex < totalItems && remainingBudget > 0) {
// 记录开始时间
const loopStart = performance.now();
// 添加一个占位对象到列表中
itemsToAdd.push({
id: currentIndex,
height: getItemHeight(currentIndex),
// 模拟一些渲染耗费时间的操作（比如加载图片）
isLoading: true,
content: `Loading item ${currentIndex}...`
});
// 检查时间预算
const loopEnd = performance.now();
remainingBudget -= (loopEnd - loopStart);
currentIndex++;
// 如果切片时间到了，或者数据渲染完了，就停下来
if (remainingBudget <= 0 || currentIndex >= totalItems) break;
}
// 更新状态
if (itemsToAdd.length > 0) {
setItems(prev => [...prev, ...itemsToAdd]);
}
// 如果还有任务没做完，而且浏览器还在空闲，就继续调用自己
if (currentIndex < totalItems && remainingBudget > 0) {
// 使用 requestIdleCallback 请求下一帧的空闲时间
requestIdleCallback((deadline) => {
renderNextBatch(currentIndex, deadline.timeRemaining());
});
} else {
// 全部搞定
setIsFinished(true);
}
};
// 启动渲染
useEffect(() => {
if (totalItems > 0 && items.length === 0) {
requestIdleCallback((deadline) => {
renderNextBatch(0, deadline.timeRemaining());
});
}
}, [totalItems, items.length]);
// 处理滚动
const handleScroll = (e) => {
const scrollTop = e.target.scrollTop;
setScrollTop(scrollTop);
// 这里可以加入更复杂的“无限滚动”逻辑，
// 当用户滚动到底部时，追加更多数据。
};
return {
items,
scrollHeight,
totalHeight: totalHeightRef.current,
handleScroll,
isFinished,
containerRef
};
};
// ==========================================
// 组件实现：列表容器
// ==========================================
const LargeListContainer = ({ itemCount = 10000 }) => {
const { items, scrollHeight, totalHeight, handleScroll, isFinished, containerRef } = useTimeSlicedList(itemCount);
return (
<div style={{ height: '500px', border: '2px solid #333', overflow: 'auto', position: 'relative' }}>
{/* 这个容器必须有一个精确的高度，否则滚动无法工作 */}
<div
ref={containerRef}
style={{
height: totalHeight || 1, // 至少给1px，否则无法滚动
position: 'relative'
}}
onScroll={handleScroll}
>
{items.map(item => (
<div
key={item.id}
style={{
height: item.height, // 这里是关键：非均匀高度
background: item.id % 2 === 0 ? '#f0f0f0' : '#ffffff',
borderBottom: '1px solid #eee',
padding: '10px',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
color: '#333'
}}
>
{item.isLoading ? (
<span>⏳ Loading Data...</span>
) : (
<div>
<h4>Item ID: {item.id}</h4>
<p>Height: {item.height}px</p>
<p>This is the content of item {item.id}. Imagine it's a long blog post or a large image.</p>
</div>
)}
</div>
))}
{isFinished && items.length > 0 && (
<div style={{ position: 'absolute', bottom: 0, width: '100%', textAlign: 'center', padding: '10px', background: '#fff' }}>
🎉 Loading Complete! (Finished)
</div>
)}
</div>
</div>
);
};
export default LargeListContainer;第五章：深度解析代码背后的“玄学”
好了，代码写完了。现在我们来品一品这里面的门道。
5.1 requestIdleCallback 的魔法
你看到我用了 requestIdleCallback。这是 Web API 的一个宝石。它允许我们在浏览器“没事干”的时候（比如等待下一个动画帧之前）执行任务。
requestIdleCallback((deadline) => {
renderNextBatch(currentIndex, deadline.timeRemaining());
});注意那个 deadline.timeRemaining()。这是时间切片的灵魂。它告诉我们：嘿，我给你 50ms 做事，如果没做完，你就回来找我要剩下的时间。
5.2 状态更新的陷阱
你可能会问：“我在 renderNextBatch 里调用了 setItems，这会不会导致 React 渲染 10,000 次？”
这是个好问题！
在上述代码中，我们使用了 itemsToAdd = [] 每次只收集一小批数据，然后一次性 setItems(prev => [...prev, ...itemsToAdd])。这把 10,000 次状态更新压缩成了 100 次更新。这是为了性能必须做的“物理压缩”。
5.3 非均匀高度的渲染策略
这是最难的部分。我们在 useEffect 里先算出了 totalHeight。这是静态数据。
但是，当我们调用 setItems 添加新的 div 时，浏览器是如何知道这些 div 加上去之后总高度变大了呢？
答案在于 CSS。
/* 我们的容器 */
div {
height: totalHeight; /* 这是动态的 */
position: relative;
}
/* 我们的子项 */
div {
height: item.height; /* 这是动态的 */
box-sizing: border-box; /* 非常重要！ */
}通过动态设置容器的高度，并且正确使用了 box-sizing: border-box，我们欺骗了浏览器，让它认为这个容器的高度是由子元素撑开的。这样，滚动条就会根据实际内容自动伸缩。
第六章：如果数据是动态变化的怎么办？
上面的例子是静态数据。但在真实世界里，瀑布流的内容是变化的。用户上传了一张 4K 图片，高度瞬间变成 2000px。
这时候，totalHeight 就会失效。
解决方案：监听布局变化。
我们需要在列表的 useEffect 或 useLayoutEffect 中，监听父容器的 scrollHeight 变化。
useLayoutEffect(() => {
if (containerRef.current) {
const handleHeightChange = () => {
// 更新总高度状态
setScrollHeight(containerRef.current.scrollHeight);
// 更新 ref 里的值
totalHeightRef.current = containerRef.current.scrollHeight;
};
// 初始化
handleHeightChange();
// 监听容器变化（当非均匀元素插入或删除时）
const observer = new ResizeObserver(handleHeightChange);
observer.observe(containerRef.current);
return () => observer.disconnect();
}
}, [items.length]);注意这里用到了 ResizeObserver。这是现代浏览器的神器，专门用来检测 DOM 元素尺寸的变化。这比计算 offsetHeight 的差值要准确得多，也不会引起重排。
第七章：React 18 的并发模式
如果你用的是 React 18，恭喜你，你有个外挂。
在 React 18 中，你可以使用 startTransition 来包裹那些耗时但非关键的操作。
const processItems = () => {
// 把这个耗时操作标记为非紧急的 transition
startTransition(() => {
// 在这里执行我们的切片渲染逻辑
renderNextBatch(0, 50);
});
};这样，如果用户在渲染列表的时候点击了其他按钮，React 会暂停那个“非紧急”的列表渲染，优先响应用户的交互。这在用户体验上是质的飞跃。
第八章：避坑指南与最佳实践
虽然我们有了时间切片，但如果你不小心，照样会掉坑里。
-
不要在渲染循环里调用
setState：
在上面的代码里，我放在了renderNextBatch函数里。这个函数本身就不是由 React 调用的，而是由requestIdleCallback调用的。所以它是安全的。如果你把它放在组件的return语句里，或者放在useEffect的依赖里，那将会是一场灾难（无限循环）。 -
处理卸载：
如果组件卸载了，你还在requestIdleCallback里往setItems传数据，React 会报错：“Can’t perform a React state update on an unmounted component”。
这就是我代码里的isMountedRef.current。它像是一个忠诚的哨兵，时刻检查宿主是否还活着。 -
可访问性：
当你隐藏元素（虚拟滚动）时，请确保你的列表对屏幕阅读器是友好的。虽然我们这里是全量切片，但如果以后做动态删除，记得使用aria-hidden或专门的库。 -
滚动位置保持：
如果用户滚动到了第 9000 行，然后你重新加载了数据，滚动条可能会跳回顶部。为了保持体验，你需要记录用户的滚动位置，并在数据更新后通过scrollTo恢复。这需要一点“记忆”。
第九章：总结与展望
好了，同学们。
通过今天的讲座，我们学会了如何用 Time Slicing 这种“切蛋糕”的哲学，来驯服那些非均匀高度的巨型列表。
我们不仅仅是写了代码，我们是在与浏览器的底层机制博弈。我们利用 requestIdleCallback 争取时间，利用 ResizeObserver 精确测量，利用 React 的状态管理来协调这场浩大的工程。
记住，技术不仅仅是工具，它是解决问题的艺术。当你的列表在几毫秒内流畅滑动，而你的同事们还在对着白屏抓狂时，那就是你展现“资深专家”魅力的时刻。
现在，放下手机，去优化你的那个 10 万行列表吧。记得，切蛋糕的时候，别切到手！
（鞠躬，退场，后台传来被产品经理追打的声音）