大家好，欢迎来到今天的“React 高级性能调优”特别讲座。
我是你们的讲师，一个在代码世界里摸爬滚打多年的“资深专家”。今天，我们不聊 useEffect 的依赖数组，也不聊闭包的陷阱。今天我们要聊一个极其性感、极其能提升用户体验，但很多人根本不知道怎么用的黑科技——React 离屏组件。
准备好了吗？让我们把那个只会报错的“Hello World”扔进垃圾桶，开始正题。
第一章：卸载的痛，重挂载的苦
首先，我想问在座的各位一个扎心的问题：你们有没有过这种经历？
你在做一个电商 App，左边是一个长长的商品列表，右边是一个购物车。当你快速滑动列表，把商品从“可见区域”滑到“不可见区域”时，右边购物车的总价突然变成 0 了？或者你正在拖拽一个排序列表，一松手，原本在列表顶部的那个元素“嗖”地一下掉到了底部，或者直接消失了？
如果你的答案是“有”，或者你心里想“这很正常，React 不就是这样吗？”，那么恭喜你，你刚刚经历了一次组件卸载重挂载的惨案。
在传统的 React 开发中，当一个元素从 DOM 中被移除（display: none，或者 v-if），或者因为父组件重渲染导致子组件被卸载时，React 会做两件极其残忍的事情：
- 执行清理：调用组件的
useEffect返回的清理函数。这意味着你的定时器被杀掉了，你的 WebSocket 连接被断开了，你的监听器被解绑了。 - 销毁状态：组件内部的
useState、useReducer等状态瞬间清零。组件从“活着”变成了“死透了”。
然后，当你再次把这个元素带回来（display: block，或者 v-show）时，React 会重新创建这个组件实例，重新初始化状态，重新执行 useEffect。这就好比你雇了一个程序员，让他写代码，写了一半你把他赶走，然后过会儿又把他叫回来，让他接着刚才没写完的地方写。这效率能高吗？这性能能好吗？
这种“卸载重挂载”带来的性能损耗，主要体现在：
- 状态丢失：用户体验割裂。
- 副作用重置：数据同步失败。
- 渲染开销：组件树的重建非常昂贵。
为了解决这个问题，React 18 引入了一个新概念：Offscreen。
第二章：离屏组件——给组件一个“幕后”的位置
那么，Offscreen 是什么？简单来说，它就像是一个“隐形员工”。
想象一下，你的公司（React 应用）里有一个部门（组件），这个部门平时不怎么干活，大家都看不见他们（不可见）。但是，当他们干活的时候（可见），他们必须保持原有的工作状态，不能因为老板（父组件）换了个姿势，他们就卷铺盖走人。
Offscreen 组件允许我们将一个组件“挂起”渲染，但它不会卸载。它就像是在后台运行的一个服务进程，或者一个在冰箱里睡觉的员工。
当组件处于 Offscreen 状态时，React 会暂停对它的渲染，但这并不代表它死了。它的状态还在，它的副作用还在。一旦它重新变得可见，它会瞬间恢复，无缝衔接。
这就好比，你把电脑屏幕关了（组件隐藏），但电脑还在运行（组件活着）。当你再次打开屏幕，你的 Word 文档还在那里，没有重新开始打字。
第三章：代码实战——从“消失”到“复活”
让我们直接上代码。为了证明 Offscreen 的威力，我们写一个最经典的场景：带计时的组件。
场景 1：一个调皮的计时器
我们创建一个组件 PickyTimer，它有一个状态 seconds，还有一个 setInterval。
import React, { useState, useEffect } from 'react';
// 这是一个普通的组件
function PickyTimer() {
const [seconds, setSeconds] = useState(0);
const [isRunning, setIsRunning] = useState(true);
useEffect(() => {
if (!isRunning) return;
const timer = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
// 清理函数：当组件卸载时，清除定时器
return () => {
console.log('PickyTimer: 我被卸载了，定时器停了！');
clearInterval(timer);
};
}, [isRunning]);
return (
<div style={{ border: '2px solid blue', padding: '20px', margin: '10px' }}>
<h3>计时器组件</h3>
<p>运行时间: {seconds} 秒</p>
<button onClick={() => setIsRunning(!isRunning)}>
{isRunning ? '暂停' : '继续'}
</button>
</div>
);
}普通版（使用 display: none 或 v-if）：
import React, { useState } from 'react';
import PickyTimer from './PickyTimer';
export default function App() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>
{show ? '隐藏' : '显示'}
</button>
{/* 如果 show 为 false，PickyTimer 会被卸载 */}
{show && <PickyTimer />}
</div>
);
}测试一下：
- 点击“显示”，开始计时。
- 点击“隐藏”。
- 观察控制台：
PickyTimer: 我被卸载了，定时器停了！ - 再次点击“显示”。
- 悲剧发生了：计时器重置为 0。因为组件被卸载并重新挂载了。
现在，让我们用 Offscreen 来拯救它。
场景 2：使用 Offscreen 保持状态
React 18 提供了一个新的入口点：react-dom/offscreen。我们需要从这里导入 Offscreen 组件。
import React, { useState } from 'react';
import { Offscreen } from 'react-dom/offscreen';
import PickyTimer from './PickyTimer';
export default function AppWithOffscreen() {
const [visible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(!visible)}>
{visible ? '隐藏 (Offscreen)' : '显示 (Offscreen)'}
</button>
{/* 核心魔法：visible 属性 */}
{/* 当 visible 为 false 时，组件不会卸载，只是挂起 */}
<Offscreen visible={visible}>
<PickyTimer />
</Offscreen>
</div>
);
}测试一下：
- 点击“显示”，开始计时。
- 点击“隐藏”。
- 观察控制台：没有任何输出！ 定时器没有停！
- 再次点击“显示”。
- 奇迹发生了：计时器从 5 秒继续跑到了 6 秒。组件无缝恢复。
这就是 Offscreen 的核心魅力：状态保持。
第四章：深入剖析——为什么它这么强？
你可能会问：“这有什么用？不就是不让它卸载吗？”
用处大了去了。这不仅仅是关于数字。让我们看看更复杂的场景。
场景 3：购物车与价格计算
想象一个电商 App 的购物车。列表很长，可能有 50 个商品。你滚动到底部，把商品 30 移到了顶部。
如果用传统方法：
- 商品 30 被卸载，它的
selected状态可能丢失，或者价格计算逻辑重跑。 - 当你再次把它拖回来时，它可能需要重新从 API 获取数据，或者重新执行复杂的
useMemo计算。
用 Offscreen：
- 商品 30 只是“隐身”了。
- 它的
selected状态还在。 - 它的价格计算还在内存里。
- 当你把它拖回来，它瞬间显示，数据毫秒级同步。
场景 4：拖拽列表
这是 Offscreen 最著名的应用场景之一——拖拽排序。
当你拖动一个列表项时，为了性能，你会把下面的所有元素暂时隐藏。如果你用传统的 v-if 或 CSS 隐藏，当你松手时，列表会闪烁，因为元素被卸载又挂载了。
使用 Offscreen，这些被拖拽元素下面的所有元素都会被挂起。它们不会销毁，它们只是“暂停了工作”。当你松手，列表瞬间稳定，没有任何闪烁。
第五章：副作用与清理函数的“生死恋”
这是很多开发者容易混淆的地方。
当我们使用 Offscreen 时，组件不会被卸载。这意味着，组件内部的 useEffect 不会执行清理函数（return () => { ... }）。
但是！ 这并不代表副作用停止了。
如果你的 useEffect 里面有一个定时器，且不依赖 isRunning 状态，那么定时器会一直跑，哪怕组件不可见。
如果你的 useEffect 依赖了外部变量（比如 window.innerWidth），React 不会重新运行这个 effect，因为组件没卸载。
那么，什么时候会触发清理函数？
只有在 Offscreen 的 visible 属性从 true 变为 false（组件挂起）时，React 会暂停副作用，但不会清理它。
只有在 Offscreen 的 visible 属性从 false 变为 true（组件恢复）时，React 会恢复副作用。
注意：如果父组件真的被卸载了，那么嵌套在里面的 Offscreen 组件也会随之被卸载，清理函数依然会被调用。Offscreen 只是一个“保命符”，保的是“可见性”带来的状态，保不住“生命周期”带来的死亡。
第六章：实战演练——构建一个“无限滚动”聊天应用
为了彻底讲透这个概念，我们来构建一个稍微复杂点的 Demo：一个带有隐藏侧边栏的聊天应用。
需求：
- 主聊天窗口显示消息。
- 左侧有一个联系人列表。
- 当联系人被选中时，聊天窗口显示该联系人的聊天记录。
- 关键点：当联系人被取消选中（聊天窗口隐藏）时，当前的聊天记录（包括未发送的消息、滚动位置、最后一条消息的时间）必须保留。
传统实现（会丢失数据）：
点击联系人 A -> 显示聊天窗口 -> 输入“你好” -> 点击联系人 B -> 聊天窗口消失 -> 再点击联系人 A -> 聊天窗口显示，刚才的“你好”没了。
Offscreen 实现（数据保留）：
点击联系人 A -> 显示聊天窗口 -> 输入“你好” -> 点击联系人 B -> 聊天窗口隐藏，但数据还在内存里 -> 再点击联系人 A -> 聊天窗口显示，数据还在。
import React, { useState, useEffect, useRef } from 'react';
import { Offscreen } from 'react-dom/offscreen';
// 联系人列表组件
function ContactList({ onSelect }) {
const contacts = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
];
return (
<div style={{ width: '200px', background: '#f0f0f0' }}>
<h3>联系人</h3>
{contacts.map(c => (
<div
key={c.id}
onClick={() => onSelect(c)}
style={{ padding: '10px', cursor: 'pointer' }}
>
{c.name}
</div>
))}
</div>
);
}
// 聊天窗口组件
function ChatWindow({ contact }) {
const [messages, setMessages] = useState([
{ id: 1, text: '初始消息', time: Date.now() }
]);
const [input, setInput] = useState('');
const scrollRef = useRef(null);
// 模拟滚动位置保持
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [messages]);
const sendMessage = () => {
if (!input.trim()) return;
setMessages(prev => [...prev, { id: Date.now(), text: input, time: Date.now() }]);
setInput('');
};
// 只有在组件可见时才滚动，优化性能
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [messages]);
return (
<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
<h3>与 {contact?.name} 聊天</h3>
<div ref={scrollRef} style={{ flex: 1, overflow: 'auto', border: '1px solid #ccc' }}>
{messages.map(msg => (
<div key={msg.id} style={{ margin: '5px' }}>
<strong>{msg.text}</strong> <small>{new Date(msg.time).toLocaleTimeString()}</small>
</div>
))}
</div>
<div>
<input
value={input}
onChange={e => setInput(e.target.value)}
placeholder="输入消息..."
style={{ width: '70%' }}
/>
<button onClick={sendMessage}>发送</button>
</div>
</div>
);
}
// 主应用
export default function ChatApp() {
const [activeContact, setActiveContact] = useState(null);
return (
<div style={{ display: 'flex', height: '500px' }}>
<ContactList onSelect={setActiveContact} />
{/* 核心逻辑：使用 visible={!!activeContact} */}
{/* 当 activeContact 为 null 时，ChatWindow 被 Offscreen 挂起 */}
<Offscreen visible={!!activeContact}>
<ChatWindow contact={activeContact} />
</Offscreen>
{/* 当没有选中联系人时，显示的空状态 */}
{!activeContact && (
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
请选择一个联系人开始聊天
</div>
)}
</div>
);
}在这个例子中，你可以随意切换联系人。当你切换走再切回来，你会发现，上一条发送的消息依然静静地躺在那里。这就是 Offscreen 给我们带来的安全感。
第七章：Offscreen 与 Suspense 的“双胞胎”关系
很多同学会问：“这个 Offscreen 和 React 的 Suspense 是不是一回事？”
它们确实长得像，都处理“延迟渲染”，但它们的灵魂完全不同。
- Suspense 是为了加载。它等待数据加载完成，或者组件懒加载完成，然后才渲染内容。它关注的是“数据什么时候来”。
- Offscreen 是为了可见性。它关注的是“内容什么时候被用户看到”。它把内容放在后台，等用户需要的时候再拿出来。
但是，它们可以结合使用！
你可以这样写：
<Suspense fallback={<LoadingSpinner />}>
<Offscreen visible={isVisible}>
<HeavyComponent />
</Offscreen>
</Suspense>这就像是一个双重保险：
Suspense负责确保HeavyComponent的数据准备好了才渲染。Offscreen负责确保HeavyComponent的渲染不会占用主线程，并且保持状态。
第八章：陷阱与最佳实践
虽然 Offscreen 很强大，但如果你滥用，也会掉进坑里。
陷阱 1：不要在 Offscreen 里做重计算
既然组件被挂起了，React 会暂停渲染。这意味着，如果你的组件内部有非常耗时的计算（比如一个复杂的矩阵运算），而 visible 属性在 false 和 true 之间疯狂切换，这些计算会在后台偷偷运行。
虽然这不会卡死主线程（因为渲染被挂起了），但这会消耗大量的 CPU 和内存。这就像你把电脑关机了，但后台程序还在跑，只是你不看它而已。
建议：Offscreen 适合保存状态，不适合保存计算结果。计算结果应该通过 props 传入，或者通过 useMemo 优化。
陷阱 2：不要忽略清理函数
虽然组件不会卸载，但父组件可能会。如果你的组件逻辑非常复杂，依赖了全局变量，你依然需要写好 useEffect 的清理函数。不要以为有 Offscreen 就可以忽略生命周期。
陷阱 3：浏览器兼容性
Offscreen 是 React 18 的新特性。在非常老的浏览器（比如 IE）上，它可能无法工作。但在这个年代，大家都在用 React 18+，所以这个问题通常可以忽略不计。
第九章：终极奥义——并发渲染的基石
最后，我们要从更高的角度看待 Offscreen。
Offscreen 是 React 18 并发渲染 的重要基石之一。并发渲染允许 React 同时准备多个版本的 UI。当用户快速操作时，React 可以暂停当前正在进行的渲染，去处理更高优先级的更新。
Offscreen 允许 React 将低优先级的更新（比如滚动列表中不可见部分的状态更新）完全挂起。这意味着，当你疯狂拖拽列表时，React 不需要更新那些不可见元素的 DOM。这极大地减少了垃圾回收（GC）的压力，提升了帧率。
第十章：总结与展望
好了，同学们，今天的讲座接近尾声。
我们回顾一下：
- 痛点：传统的
v-if或 CSS 隐藏会导致组件卸载重挂载，状态丢失，性能损耗。 - 解药：
Offscreen组件允许组件在不可见时保持存活（挂起渲染），但保留状态和副作用。 - 场景：拖拽列表、购物车状态保持、聊天记录保持、无限滚动列表。
- 注意：它不是
Suspense，它不是魔法，它只是 React 18 给我们提供的一个更精细的渲染控制工具。
最后，我想送给大家一句话：
在 React 的世界里，不要让组件轻易“死”去。只要用户还需要它，哪怕它不可见，它也应该是活着的。这就是 Offscreen 带给我们的智慧。
现在，拿起你的键盘，去重构你那个卡顿的列表吧！让那些被隐藏的组件在幕后为你默默守护数据。祝大家编码愉快，性能飞升！
（讲座结束，掌声雷动）