react-19

该技能包围绕 React 19.3 的核心特性与模式组织，旨在为实施 React 19.3 相关代码提供参考。内容按用途与主题划分，具体如下。

用途

面向使用 React 19.3 进行开发的场景，涵盖新 API、新 Hooks、经典 Hooks、组件、编译器以及从 React 18 到 19 的迁移。

React 19.3 核心特性

稳定版本（react/react-dom 19.3.0，2026-09-09；@types/react 19.3 需要 TypeScript ≥ 5.6）：

• <ViewTransition>：通过浏览器 View Transition API 实现进入、退出、更新和共享的动画。
• addTransitionType(type)：标记 Transition 以选择不同的动画。
• <Fragment ref>：无需包裹 <div> 即可使用 FragmentInstance（事件、焦点、观察器）。
• use(browser(reason?))（react-dom）：仅浏览器渲染，在服务端挂起，在 HTML 中显示 Suspense 回退。

行为变化：Transition 不再纠缠；StrictMode 在水合期间双重调用 effect；条件式 use() 解除阻塞时给出 DEV 警告。

RSC 安全：react-server-dom-* 必须 ≥ 19.2.4（CVE-2025-55182 RCE 及后续 DoS CVE）；建议 ≥ 19.2.7 或 19.3.0。

新 Hooks（19.0–19.2）

• use()：在渲染中读取 promise/context。
• useOptimistic：乐观 UI 更新。
• useActionState：表单 action 状态管理。
• useFormStatus：表单 pending 状态（子组件）。
• useEffectEvent：effect 中的非响应式回调。

经典 Hooks（React 18+）

• 状态 Hooks：useState（局部组件状态）。
• Effect Hooks：useEffect（绘制后副作用）、useLayoutEffect（绘制前同步 DOM）。
• Ref Hooks：useRef（DOM 访问、可变值）、useImperativeHandle（自定义 ref API）。
• 性能 Hooks（编译器存在时较少使用）：useMemo（缓存昂贵值）、useCallback（缓存函数）。
• 其他 Hooks：useId（无障碍唯一 ID）、useSyncExternalStore（外部 store 订阅）。
• 自定义 Hooks：提供模式与实现参考。

Activity 组件（自 19.2 起稳定）

在保留状态的同时隐藏/显示组件，示例： <Activity mode={isActive ? 'visible' : 'hidden'}> <TabContent /> </Activity>

React Compiler（1.0 稳定，2025 年 10 月，支持 React 17+）

自动记忆化，useMemo/useCallback 大多过时。构建时优化；多数情况下无需手动记忆化；报告称交互速度提升 2.5 倍。

快速参考

• use() Hook：在渲染中读取 promise（配合 Suspense），可有条件读取 context。
• useOptimistic：立即更新 UI，服务器稍后更新。
• useActionState：管理表单 action 状态。
• useEffectEvent（自 19.2 稳定）：始终持有最新 props/state，不触发重跑。

18 到 19 的破坏性变更

• ref 作为 prop：移除 forwardRef 包裹。
• Context 即 provider：直接使用 <Context value={}>。
• useFormStatus：从 react-dom 导入。

最佳实践

• 数据获取：使用 use() + Suspense，而非 useEffect。
• 表单：使用 Actions + useActionState。
• 乐观 UI：使用 useOptimistic 实现即时反馈。
• 标签页/模态框：使用 <Activity> 保留状态。
• Effect 事件：使用 useEffectEvent 处理非响应式回调。
• 记忆化：交由 React Compiler 处理。

模板

• React 19 模式：action-form.md（useActionState 表单）、optimistic-update.md（useOptimistic 模式）、activity-tabs.md（Activity 组件标签页）、use-promise.md（use() 配合 promise）。
• 经典 Hooks 模式：state-patterns.md、effect-patterns.md、ref-patterns.md、custom-hooks.md、external-store.md。
• 性能模式：virtual-list.md（TanStack Virtual 长列表）、lazy-components.md（代码分割与懒加载）、profiling-devtools.md（React DevTools Profiler）。

性能

• 虚拟化：对大型列表（100+ 项）仅渲染可见项。
• 懒加载：对路由和重型组件进行代码分割以减小包体积。
• 性能分析：使用 DevTools Profiler 测量渲染性能。 说明：使用 React Compiler（1.0+）后，手动 memo/useMemo/useCallback 优化大多过时，应先分析再验证是否需要优化。

禁止（过时模式）

• ❌ 用 useEffect 获取数据 → 改用 use() + Suspense。
• ❌ forwardRef → 改用 ref 作为 prop。
• ❌ <Context.Provider> → 改用 <Context value={}>。
• ❌ 到处手动 useMemo/useCallback → 交由 Compiler 处理。
• ❌ 用条件渲染保留状态 → 改用 <Activity>。

工作流（强制性）

任何实现前，并行生成 3 个代理，每个 Agent 调用一个名称：fuse-ai-pilot:explore-codebase（分析现有 React 模式与组件结构）、fuse-ai-pilot:research-expert（通过 Context7/Exa 验证最新 React 19.3 文档）、mcp__context7__query-docs（检查 use()、useOptimistic、useActionState、Activity 模式）。实现后，运行 fuse-ai-pilot:sniper 进行验证。