编程 React 19.2 深度实战：<Activity> 接管并发渲染、useEffectEvent 终结依赖地狱、cacheSignal 重写 RSC 请求生命周期（2026 实战指南）

2026-08-15 14:44:38 +0800 CST views 8

React 19.2 深度实战：接管并发渲染、useEffectEvent 终结依赖地狱、cacheSignal 重写 RSC 请求生命周期（2026 实战指南）

摘要：当框架进入「稳定期」，真正的革命往往发生在工程细节里。React 19.2 没有喧哗的发布会，却一口气交付了四件会改变你日常代码的东西：<Activity> 把「离屏渲染与预取」做成一等公民、useEffectEvent 彻底终结 effect 依赖地狱、Partial Pre-rendering 让静态壳与动态流在 RSC 里无缝拼接、cache/cacheSignal 把请求去重与取消变成渲染引擎的内置能力。本文从心智模型一路写到源码级原理，配 4 个可运行实战与 15 条生产级建议，带你把这套新武器真正用起来。

一、背景：为什么 19.2 值得你专门升级

React 19 系列的主线非常清楚：把「并发能力」和「服务端能力」从实验特性变成默认能力。19.0 把 Server Components、Actions、use、ref-as-prop 推到了稳定线；19.1 修了 useId 的前缀兼容问题。到了 19.2，React 团队做了一件更「基建」的事——补上过去只能靠社区 hack 才能实现的三个能力：

「看不见但还活着」的组件。过去想做 tab 切换时保住表单状态、想做路由预取，只能靠条件渲染 {show && <Page/>} 或自己维护缓存，{show && ...} 一关掉，子树整个卸载，effect 全清，状态全丢。
effect 里的「事件逻辑」。我们早就受够了：明明只想在「连接成功」那一刻弹个通知，却因为通知文案依赖 theme，导致 theme 一变就触发整条 effect 重跑、聊天室重连。
RSC 的请求复用与取消。服务端组件树里同一个 fetch 被多个组件调用，要么重复发请求，要么得自己包一层 memo；更糟的是导航切换时，旧请求还在飞，新页面已经到了，你却没法优雅地把它掐掉。

19.2 用四个原语正面回应了这三件事：<Activity>、useEffectEvent、cache/cacheSignal，外加一个面向 RSC 的 Partial Pre-rendering 管线。它们单个看起来都不大，但合在一起，等于把「并发渲染 + 请求生命周期管理」第一次做成了框架的内置契约。

本文所有示例均基于 React 19.2，配套 ESLint 插件需升级到 eslint-plugin-react-hooks@6。

二、核心概念

2.1 `<Activity>`：从条件渲染到「活动单元」

<Activity> 的出发点极其朴素：你想隐藏一个页面，但不想让它「死掉」。

传统写法是条件渲染：

// 旧：关闭即卸载，状态/副作用全丢
{isVisible && <SettingsPage />}

它的代价是：切回来要重新挂载、重新发请求、表单输入清空、滚动位置归零。<Activity> 把这件事重定义为「活动（activity）的可见性」：

import { Activity } from 'react';

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <SettingsPage />
</Activity>

两种模式语义严格区分：

visible：子组件正常挂载 effect、正常处理更新，和你平时写的没区别。
hidden：React 会卸载子树的副作用（effect cleanup 已执行），但保留组件实例与状态，并把所有更新「延迟」到 React 闲下来再处理。

注意这里的关键差异：hidden 不是 display:none。它是在 React 协调（reconciliation）层面让子树「停止工作」，但 DOM 节点可能保留也可能移除（取决于具体实现与是否仍有可见引用），而状态与尚未完成的更新被保留在内存里。这让两件过去很难的事变得免费：

预取用户可能访问的页面：把「下一个 tab」「下一帧路由」用 hidden 包起来提前挂载，它的 useEffect 会去拉数据、预载 CSS/图片；等用户真点进去切到 visible，页面「秒开」，因为数据早就在路上甚至已经到了。
保留导航状态：用户在一个长表单里填到一半，临时切去别的 tab，回来时输入还在——因为组件从来没卸载。

function App() {
  const [tab, setTab] = useState('feed');
  return (
    <nav>
      <button onClick={() => setTab('feed')}>动态</button>
      <button onClick={() => setTab('settings')}>设置</button>
    </nav>
    <Activity mode={tab === 'feed' ? 'visible' : 'hidden'}>
      <FeedPage />
    </Activity>
    <Activity mode={tab === 'settings' ? 'visible' : 'hidden'}>
      <SettingsPage />
    </Activity>
  );
}

这里 SettingsPage 即使被 hidden，它的初始数据请求也已经在后台跑过了。React 团队明确表示 Activity 未来会扩展更多模式（如不同优先级的预取策略），它是 React 内部「offscreen」工作的正式对外暴露。

2.2 useEffectEvent：把「事件逻辑」从依赖里摘出来

先看那个经典痛点：

// 问题：theme 一变，整个 effect 重跑，聊天室重连
function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme); // 用到最新的 theme
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, theme]); // theme 被迫进依赖，但它只是「通知文案的颜色」
}

theme 在这里只是「连接成功时弹通知用的颜色」，它根本不该导致重连。可 useEffect 的依赖数组是「值语义」的：只要闭包里读到的响应式值发生变化，就得重跑。于是我们陷入两难——要么忽略 lint 警告，要么把 theme 塞进 ref 手动同步。

useEffectEvent 给了一个干净的抽象：它返回一个「事件函数」，这个函数总是读到最新的 props/state，但本身不参与 effect 的依赖追踪。

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // 永远读到最新 theme
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => onConnected()); // 调用事件函数
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // 只剩 roomId，theme 不再触发重连
}

心智模型：useEffectEvent(fn) 等价于「React 帮你把 fn 包进一个始终指向最新闭包的 ref」。每次渲染，fn 都被重新赋给那个 ref；effect 里调用的 onConnected() 实际调用的是 ref 里的当前版本。所以 effect 的依赖数组里不需要、也不应该放 onConnected。

三条硬性约束（由 lint 规则保障）：

事件函数只能在 effect / 其他事件函数内部调用，不能在渲染期间调用。
事件函数只能在定义它的同一个组件或同一个自定义 Hook 内使用，不能往下传。
必须把 eslint-plugin-react-hooks 升到 @6，否则 lint 会误报。

2.3 部分预渲染（Partial Pre-rendering）

RSC 的静态生成（prerender）一直是「全有或全无」：要么整页静态、要么整页动态。19.2 引入 postponed 状态，让一页可以被「切开」——静态部分先渲染、缓存、上 CDN，动态部分用 resume 在请求时补全。

import { prerender } from 'react-dom/server';

const controller = new AbortController();
const { prelude, postponed } = await prerender(<App />, {
  signal: controller.signal,
});
// prelude: 静态 HTML 流，可立刻写入 CDN / 缓存
// postponed: 被 Suspense 边界「推迟」的动态状态，可序列化存储
await savePostponedState(postponed);

// 请求时，用 postponed 恢复 SSR 流
const resumedStream = await resume(<App />, postponed);
// 或生成 SSG 的完整 HTML
const { prelude } = await resumeAndPrerender(<App />, postponedState);

它的价值链条是：

降低 TTI：用户首屏拿到的是已经渲染好的静态壳，交互相位立刻可用。
支持中断/失败：controller.signal 可随时 abort，渲染中断不会污染缓存。
优化 LCP：静态壳直出，动态内容流式补全，React 用启发式把 LCP 控制在 2.5s 以内。
为 <ViewTransition> 铺路：稳定的静态壳 + 动态补全是视图转场动画的最佳底座。

2.4 cache / cacheSignal：RSC 请求去重与取消

cache(fn) 是 RSC 专属的「按请求记忆化」原语。同一个 cache(fetch) 在一次渲染请求内被任意多个组件调用，只发一次真实请求：

import { cache, cacheSignal } from 'react';

const dedupedFetch = cache(fetch);

async function Product({ id }) {
  // 多个组件读同一个 id 的商品，只发一次网络请求
  const data = await dedupedFetch(`/api/product/${id}`, {
    signal: cacheSignal(), // 绑定到本次 cache 生命周期
  });
  return <div>{data.name}</div>;
}

cacheSignal() 返回一个 AbortSignal，它的生命周期与 cache() 绑定：当本次渲染完成、被中止或失败时，signal 自动 abort，从而取消还在飞的请求。这在「动态路由切换」场景价值巨大——用户快速在两个商品页之间跳，上一个页面对应请求的 cache 随渲染中止而失效，cacheSignal 立刻把旧请求掐掉，服务端不再为注定无用的响应浪费数据库连接。

2.5 工具链与可观测性配套

ESLint 插件 v6：默认启用 flat config（recommended），新增 React Compiler 规则（如自动记忆化建议）；老项目可用 recommended-legacy。
useId 前缀变更：从 19.0 的 :r:、19.1 的 «r» 改为 _r_，以兼容 view-transition-name 与 XML 1.0，并减少 ID 冲突。
DevTools 性能轨道：Chrome DevTools 新增 Scheduler（显示任务优先级与类型）与 Components（渲染/副作用时间轴）两条轨道，可直接定位「为什么某个更新被推迟」。
SSR 优化：Suspense 边界短时批处理、统一揭示内容、支持 <ViewTransition>；Node.js 虽支持 Web Streams SSR，但官方仍推荐 Node Streams 以获得更好压缩与性能。

三、架构分析：它们到底在引擎里做了什么

3.1 Activity 的离屏状态机

<Activity> 本质是把 React 内部早已存在的 offscreen 协调机制正式产品化。当一个子树从 visible 切到 hidden：

React 标记该子树为「非活跃」，触发其所有 effect 的 cleanup（订阅、定时器、连接被释放）。
但 fiber 节点与 hooks 状态保留在内存，没有被销毁。
进入该子树的更新被推入一个「延迟队列」，React 在优先级更高的 visible 工作完成后才处理它们。

切回 visible 时：重新执行 effect（重新订阅/连接），延迟队列里的更新被 flush。由于状态没丢，用户感知是「瞬间恢复」。这套机制天然与 concurrent features（startTransition、useDeferredValue）协作——hidden 子树即使有更新也不会抢 visible 子树的交互。

3.2 useEffectEvent 背后的 ref 化

useEffectEvent(fn) 的底层等价于：

// 概念等价（非真实 API）
function useEffectEvent(fn) {
  const ref = useRef(fn);
  ref.current = fn;        // 每次渲染刷新到最新闭包
  return (...args) => ref.current(...args);
}

关键点在于：返回的函数不含响应式依赖，所以它出现在 useEffect 的依赖数组里时，React 不会因为它「变化」而重跑 effect；但调用它时拿到的永远是最新 props/state。这就是「读最新值，但不订阅」的精髓。lint 规则之所以限制「只能在 effect 内调用、不能外传」，正是为了防止你在渲染期读到一个「被延迟到 effect 才有意义」的最新值，制造时序 bug。

3.3 部分预渲染的管线

prerender 执行时，React 的服务端渲染器遇到 <Suspense> 边界会把它「切开」：边界之上的同步内容生成 prelude 静态流；边界之内的异步内容对应的渲染状态被序列化成 postponed。resume 拿到 postponed 后，从断点继续流式产出 HTML，客户端 hydrate 时通过 resume 衔接，无需重算静态部分。resumeAndPrerender 则在一次请求内把完整 SSG 产出，适合落地页缓存。这条管线的核心收益是「静态与动态解耦」：CDN 缓存静态壳，动态内容按请求实时补全。

3.4 cache 的 per-request memoization 语义

cache(fn) 的缓存作用域是「一次渲染请求」，而非全局模块级。这意味着：两个不同用户、两次不同请求各自拥有独立缓存，不会因为 A 用户缓存了某数据就泄漏给 B 用户（安全风险）。cacheSignal() 把 AbortController 的语义下沉到渲染生命周期——React 在请求边界结束时统一 abort 所有信号，省去你手动管理「这次请求里我发过的所有 fetch」的取消集合。

四、代码实战

4.1 用 Activity 做「即时导航」的 Tab 面板

目标：两个 Tab，切过去零延迟，且后台预取数据。

import { Activity, useState } from 'react';

function Dashboard() {
  const [tab, setTab] = useState('overview');

  return (
    <div>
      <TabBar tab={tab} onChange={setTab} />
      {/* overview 默认可见；reports 用 hidden 提前挂载并在后台拉数 */}
      <Activity mode={tab === 'overview' ? 'visible' : 'hidden'}>
        <OverviewTab />
      </Activity>
      <Activity mode={tab === 'reports' ? 'visible' : 'hidden'}>
        <ReportsTab />
      </Activity>
    </div>
  );
}

function ReportsTab() {
  // hidden 期间，这个 effect 已经在后台执行，数据已就位
  const [data] = useReportData(); // 内部 useEffect 调接口
  return <ReportTable data={data} />;
}

生产注意：hidden 子树仍会消耗 CPU/网络（它在后台跑 effect）。对「用户大概率会去」的页面预取，对冷门页面不要无脑包 Activity，否则后台请求雪崩。

4.2 用 useEffectEvent 解耦 ChatRoom

回到开头那个例子，完整可运行版：

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const notifyConnected = useEffectEvent(() => {
    showNotification('已连接', theme); // 最新 theme，不触发重连
  });

  useEffect(() => {
    const conn = createConnection(serverUrl, roomId);
    conn.on('connected', () => notifyConnected());
    conn.connect();
    return () => conn.disconnect();
  }, [roomId]); // 干净了

  return <ChatBox roomId={roomId} />;
}

迁移经验：扫描代码里「effect 依赖里放了本不想让它触发重跑的值」的地方，优先用 useEffectEvent 收口，比塞 ref 可读性高一个量级。

4.3 部分预渲染 + Next.js 混合渲染

在 App Router 里，把稳定外壳做成静态、把个性化内容交给 resume：

// 构建期：生成静态 prelude + postponed
import { prerender } from 'react-dom/server';

export async function generateStaticShell() {
  const controller = new AbortController();
  const { prelude, postponed } = await prerender(<App />, {
    signal: controller.signal,
  });
  await persistPrelude(prelude);
  await persistPostponed(postponed);
}

// 请求期：从 postponed 恢复
export async function renderOnRequest(req) {
  const postponed = await loadPostponed(req);
  return resume(<App />, postponed); // 流式返回，LCP 显著改善
}

4.4 用 cacheSignal 取消无效 RSC 请求

import { cache, cacheSignal } from 'react';

const loadProduct = cache(async (id) => {
  const res = await fetch(`/api/product/${id}`, {
    signal: cacheSignal(), // 请求随渲染生命周期自动取消
  });
  return res.json();
});

async function ProductPage({ id }) {
  const product = await loadProduct(id); // 同请求内多次调用只发一次
  return <ProductDetail product={product} />;
}

导航切换时，旧 ProductPage 对应的渲染被中止，cacheSignal 自动 abort 旧 fetch，数据库连接即时释放。

五、性能优化：15 条生产级建议

只对「高概率访问」的页面用 <Activity> 预取，冷门页盲目预取会制造后台请求风暴。
hidden 不等于免费：它的 effect 仍在跑，监控后台请求数与 CPU。
Activity 与 startTransition 配合：把 tab 切换包进 transition，让 hidden/visible 切换不阻塞输入。
useEffectEvent 不要外传，否则 lint 报错且易出时序 bug；需要跨组件共享事件逻辑时改用自定义 Hook 内联定义。
effect 依赖数组里删除被 useEffectEvent 收口的值，这是重跑风暴的主要来源。
cache(fn) 只在 RSC 里用，客户端组件用 use + 普通 memo，二者语义不同。
所有 cache 包裹的 fetch 都带上 cacheSignal()，否则取消能力失效。
动态路由切换场景优先 cache，可把数据库 QPS 砍掉一个数量级（重复组件共享数据）。
部分预渲染的静态壳上 CDN，动态内容走 resume，LCP 从「整页动态」降到「壳直出」。
用 controller.signal 包裹 prerender，渲染中断时不会污染缓存。
Suspense 边界要划得合理：边界太粗，静态壳收益小；太细，postponed 状态碎。
优先 Node Streams 做 SSR，压缩与性能优于 Web Streams（官方建议）。
升 ESLint 插件到 v6 并开 flat config，React Compiler 规则能提前发现该记忆化却没记忆化的组件。
用 DevTools 的 Scheduler/Components 轨道定位优先级反转：看到某个低优更新抢了高优，多半是 effect 里同步重算。
useId 前缀变更后检查手写选择器：若旧代码用 :r: 拼 CSS 选择器需改 _r_，避免匹配失败。

六、总结与展望

React 19.2 的这四个原语，表面上是「小特性」，实则是把过去三年来社区用各种 hack 实现的能力，第一次收敛成了框架契约：

<Activity> = 离屏 + 预取 + 状态保留，统一了 tab、路由、modal 的「可见性」语义；
useEffectEvent = 事件逻辑与依赖解耦，终结了 effect 依赖地狱；
Partial Pre-rendering = 静态壳与动态流解耦，把 RSC 的静态优势真正落地到混合渲染；
cache/cacheSignal = 请求去重与取消下沉到渲染引擎，RSC 服务端资源利用上了「自动驾驶」。

把它们和 Vue 的 Vapor Mode、Svelte 的 Runes、Solid 的细粒度响应放在一起看，2026 年前端的主旋律不是「谁跑更快」，而是**「框架把并发、请求、生命周期这些脏活揽到自己身上，让业务代码回到声明式」**。React 选的路是：不引入新范式，而是把能力做成一等公民的原语。

给团队的升级建议很直接：先升 eslint-plugin-react-hooks@6 跑一遍 lint，把 effect 依赖地狱用 useEffectEvent 收口；再用 cache/cacheSignal 替换服务端组件里手写的请求去重；最后在关键导航路径上试点 <Activity> 与部分预渲染。三步下来，你大概率能看到 TTI、LCP 与动态路由的服务端资源消耗同时改善——而这，正是「稳定期框架」最实在的价值。

本文所有 API 均基于 React 19.2 正式版；若你的版本较早，请先 npm i react@^19.2 react-dom@^19.2。示例代码用于说明心智模型，生产环境请结合错误边界与加载态完善。