React 19.2 新特性解析：Activity 组件与 React Foundation 治理架构

React 19.2 于 2025 年 10 月正式发布，带来了几个关键新特性，其中最值得关注的是 组件——一种全新的应用状态组织和渲染控制方式。与此同时，2026 年 2 月 React Foundation 在 Linux Foundation 旗下正式成立，标志着 React 正式从 Meta 独立出来，进入社区化治理时代。这两件事在时间线上紧密相连，共同塑造了 React 的下一个发展阶段。本文深入解析 Activity 组件的设计原理、useEffectEvent 的实际用法，并从治理视角审视 React Foundation 的影响。

Activity 组件：比条件渲染更聪明的可见性控制

条件渲染的局限性

在 Activity 出现之前，控制组件可见性只有一种方式：条件渲染。

`js

{isVisible && }

`

这种写法的本质是：存在就渲染，不存在就不渲染。但现实产品中有大量"我需要它存在于 DOM 中，但不一定要用户看见"的场景——比如：

• 用户即将导航到的页面，需要预加载数据和 CSS，但不想让用户等
• 后台任务的状态展示，页面已渲染但不想立即占用渲染资源
• 多标签页应用中，当前标签页之外的页面需要保持状态（scroll、form data），但不渲染

条件渲染无法优雅地处理这些场景。我们要么放弃状态保持（每次都销毁重建），要么把大量组件永久挂载在 DOM 上（内存泄漏），要么自己写一套复杂的状态管理（过度工程）。

Activity 的三种模式

是 React 团队给出的官方解法。它支持三种模式：

`js

// visible：正常渲染，行为等同于条件渲染为 true

// hidden：隐藏但不解绑，状态全部保留，不触发渲染

// Activity 还支持过渡模式（未来）

// mode="paused"：冻结渲染，保留最后帧

`

hidden 模式的工作原理值得深入理解。当 mode="hidden" 时：

1. React 卸载 hidden 分支中的 effects（useEffect cleanup 执行）

2. React 延迟 所有 hidden 分支的 updates，直到没有 visible 内容需要处理

3. 分支的组件树保留在内存中，状态不丢失

这意味着 hidden Activity 里的组件不会产生任何渲染代价。预渲染（pre-render）场景可以直接用 Activity 实现，而无需 Vercel 的 Partial Prerendering 或 Next.js 的 loading.tsx。

实战：实现应用级预加载

来看一个典型场景：电商 App，用户进入商品列表页，同时后台预加载商品详情页。

`js

// App.jsx

import { Activity } from 'react';

import ProductList from './pages/ProductList';

import ProductDetail from './pages/ProductDetail';

import Navigation from './components/Navigation';

function App() {

const [currentPath, setCurrentPath] = useState('/');

const [prefetchPath, setPrefetchPath] = useState(null);

// 分析用户鼠标悬停行为，预测下一个导航

const handleMouseEnter = (path) => {

setPrefetchPath(path);

};

return (

<>

path="/product/:id"

component={ProductDetail}

/>

{/* 预加载下一个可能访问的页面 */}

visibleWhenHidden={false}>

{prefetchPath === '/product/:id' && }

);

}

`

这比自行实现"预加载逻辑 + loading state"要简洁得多。React 替你处理了所有边界情况。

与 View Transitions 的协同

React 19.2 同时引入了对 View Transitions API 的实验性支持（useViewTransition hook），Activity 和 View Transitions 可以配合使用：

`js

mode="visible"

onViewTransition={(state) => {

if (state === 'entering') {

document.startViewTransition(() => {

// 自定义过渡动画逻辑

});

}

}}

>

`

这种组合让"预加载 + 状态保持 + 酷炫过渡"在 React 框架层成为一等公民。

useEffectEvent：终于可以读取最新 props 的 effect

useEffectEvent 是 React 19.2 中另一个被严重低估的特性。来看它解决了什么问题：

stale closure 的经典陷阱

`js

function ChatRoom({ roomId, theme }) {

useEffect(() => {

const connection = createConnection(serverUrl, roomId);

connection.on('connect', () => {

// ❌ 这里的 theme永远是第一次渲染时的值

showNotification(Connected to ${theme} room);

});

connection.connect();

return () => connection.disconnect();

}, [roomId]); // theme 被排除了，导致 ESLint 警告或 bug

}

`

这是经典的 stale closure 问题：effect 内的回调函数捕获的是创建时的 theme 值，而不是最新的值。传统解法是把 theme 加入依赖数组，但这样会导致 effect 每次 theme 变化都重新连接——对于长连接场景这是无法接受的。

useEffectEvent 的解法

`js

function ChatRoom({ roomId, theme }) {

useEffect(() => {

const connection = createConnection(serverUrl, roomId);

const onConnect = useEffectEvent(() => {

// ✅ 始终读取最新的 theme，不需要加入依赖

showNotification(Connected to ${theme} room);

});

connection.on('connect', onConnect);

connection.connect();

return () => connection.disconnect();

}, [roomId]); // roomId 是唯一的实际依赖

}

`

useEffectEvent 标记的回调函数永远不会被"stale"——它内部可以读取任何最新的 props 和 state，而不会把那些变量带入外部 effect 的依赖数组。这让长连接类场景的代码清晰了很多。

React Foundation：从 Meta 资产到社区基础设施

治理结构

2026 年 2 月成立的 React Foundation 是一个由 Linux Foundation 托管的非营利组织。核心成员（铂金级别）包括：

董事会由各成员代表组成，执行董事 Seth Webster 主持日常运营。

为什么重要

过去七年，React 的发展方向由 Meta 内部需求驱动。这本身不是坏事——Meta 的规模足够大，内部需求足够多元，React Router、Server Components 这些特性都源于内部产品压力。但这也意味着：

1. 外部贡献者没有安全感：改动了代码，但合不合并由 Meta 决定

2. 商业公司顾虑：依赖一个竞争对手的产品线有风险

3. 治理不透明：重大决策缺乏公开 RFC 流程

Foundation 成立后，React 引入了正式的 RFC（Request for Comments）流程，重大变更需要社区讨论和正式提案。这对整个生态的信任度有显著提升。

对前端生态的影响

React Foundation 的成立对框架生态有直接意义：

• **Vercel 的定位变得更清晰**：作为 Platinum 成员，Next.js 和 React 的协同会更紧密但也更透明
• **React Native 有了独立锚点**：不再完全依附 Meta 的移动战略
• **国产化有了制度保障**：华为作为铂金成员，意味着中国开发者社群的参与是制度化的，不是临时补丁

实战建议：如何迁移到 Activity

Activity 是一个破坏性较小的增量特性，建议按以下优先级迁移：

优先级 1：Tab/多面板应用 → 用 Activity 替代条件渲染

`js

// Before

{tab === 'inbox' && }

{tab === 'sent' && }

// After

`

优先级 2：列表页 → 详情页预加载

`js

`

优先级 3：废弃 loading.tsx，使用 Activity 替代

Next.js 13+ 的 streaming loading.tsx 可以逐步迁移到 Activity，获得更细粒度的控制和更一致的状态保持语义。

总结

React 19.2 带来的 Activity 组件代表了一种新思维：不是"要不要渲染"，而是"以什么方式存在"。visible/hidden/paused 三种模态覆盖了应用状态管理中的大量边界场景。useEffectEvent 解决了 decade-long 的 stale closure 痛点，让 effect 逻辑可以优雅地引用最新状态而不引入不必要的重执行。两者结合让 React 应用的状态管理代码显著简化。

与此同时，React Foundation 的成立是 React 历史上最重要的治理事件。Linux Foundation 的背书让 React 真正成为社区公共资产，而非单一公司的战略筹码。对于已经在 React 生态深耕的团队，这两件事的组合意味着：React 的稳定性会更强，社区影响力会更深，产品开发可以更专注于业务逻辑而非框架迁移焦虑。