# ⚡ 技能：反应专家 ## 描述该技能为 React 应用程序提供全面的性能优化指导，并针对 2026 年人工智能辅助工作流程进行了优化。它的重点是消除瀑布、利用 React 编译器，并通过现代 API（“use”、“useActionState”、“”）最大限度地提高服务器和客户端效率。 ## 核心优先事项 1. **消除瀑布**：第一要务。将获取移动到尽可能高的位置，并行化操作，并使用“cacheSignal”来防止浪费工作。 2. **React 编译器优化**：将代码构造为“易于忘记”（自动记忆），同时知道何时仍需要手动干预。 3. **部分预渲染 (PPR)**：结合最佳的静态和动态渲染，实现低于 100 毫秒的 LCP。 4. **水合策略**：避免“水合不匹配”并使用 `` 进行状态保存。 ## 🏆 2026 年 5 大性能提升 1. **React Compiler（自动记忆）**：删除“useMemo 税”。遵守“React 规则”的代码会自动优化。 2. **部分预渲染 (PPR)**：在同一请求中传输动态内容的同时立即提供静态 shell。 3. **`use()` API**：消除了用于数据获取的`useEffect` \+ `useState` 样板，最多减少了 30% 的客户端代码。 4. **`cacheSignal`** ：如果客户端断开连接或离开，允许服务器中止昂贵的异步工作。 5. **服务器操作+`useActionState`**：原生处理挂起状态和乐观更新，减少对第三方表单/状态库的依赖。 ## 目录和详细指南 ### 1\. [消除瀑布]() — **关键** * 推迟等待直到需要为止 * 用于生命周期管理的“cacheSignal” * 基于依赖的并行化（`better-all`） * `Promise.all()` 用于独立操作 * 战略悬念边界 ### 2\. [捆绑包大小优化]() — **关键** * 避免 Barrel 文件导入（Lucide、MUI 等） * 条件模块加载（动态`import()`） * 推迟非关键库（分析） * 基于用户意图的预加载 ### 3\. [服务器端性能]() — **高** * **部分预渲染 (PPR)** 深入探讨 * 跨请求LRU缓存 * 最小化 RSC 边界的序列化 * 组件组合的并行数据获取 ### 4\. [客户端和数据获取]() — **中-高** * **`use()` API** 用于 Promise 和 Context * **`useActionState`** 用于表单管理 * **`useOptimistic`** 用于即时 UI 反馈 * 删除全局事件监听器的重复数据 ### 5\. [React 编译器和重新渲染]() — **中** * **编译器规则** ：无副作用渲染 * 延迟状态读取 * 缩小效应依赖性 * 非紧急更新的转换（`startTransition`） ### 6\. [渲染性能]() — **中** * **`` 组件**（显示/隐藏状态保存） * CSS `内容可见性` * 水合不匹配预防（无闪烁） * 起重静态 JSX ### 7\. [JavaScript 微优化]() — **低-中** * 批量 DOM 更改 * 索引映射与`.find()` * `toSorted()` 与 `sort()` ### 8\. [高级模式]() — **低** * 参考文献 / `useEffectEvent` 中的事件处理程序 * `useLatest` 用于稳定回调引用 ## 快速参考：“该做的”和“不该做的” **不要** | **做** ---|--- `从'large-lib'导入{图标}` | `从'large-lib/Icon'导入图标` `等待();等待 b();` | `Promise.all([a(), b()])` `useEffect(() => { fetch(...) }, [])` | `const data = use(dataPromise)` `const [状态，设置] = useState(init())` | `useState(() => init())` `array.sort()` | `array.toSorted()` 组件主体中的“searchParams” | `searchParams` 仅在回调中手动`useMemo`/`useCallback`（大部分）|信任 React 编译器（但检查 React 规则） ** ** _针对 React 19.2+ 和 Next.js 16.1+ 进行了优化。_ _更新时间：2026 年 1 月 22 日 - 14:59_

反应专家

包含技能