技能介绍

你需要解决的React工程痛点

在使用React 19开发时，你是否遇到过以下问题：想直接在渲染中读取Promise或Context却不知道用use() Hook的正确姿势，误把它和useEffect混用导致渲染阻塞；在拆分Server Components时把'use client'直接写在顶层，导致整页都被标记为客户端组件，打包体积暴涨；想优化性能却盲目给组件套React.memo，结果profiling后发现根本没有无效渲染，反而增加运行时开销；自定义Hook要么命名不规范导致React识别不到，要么逻辑耦合导致复用困难。这些问题看似零散，但本质上是React 19新特性的落地规则和长期可维护的模式约定缺失导致的。

技能如何帮你理清思路

这个技能把React 19的核心特性和通用模式拆解成了可直接执行的规则，覆盖你日常开发中90%的场景：

针对use() Hook，明确它能在条件语句或循环中调用，但必须配合Suspense边界使用——比如用<Suspense>包裹读取Promise的组件，避免整页被阻塞。
在Server Components的组织上，要求把'use client'推到最底层，只有真正需要交互的叶子组件（比如带输入框的表单）才标记为客户端组件，减少客户端代码的冗余。
对于Server Actions，整理了useActionState和useOptimistic两个React 19新Hook的使用场景——前者用于管理action的状态，后者用于乐观更新乐观锁。
Suspense边界的正确用法也被明确：围绕独立的数据获取单元放置，比如单独的卡片组件，而不是把整页塞进一个边界，否则会失去流式渲染的优势。
自定义Hook的约定更具体：必须以use开头，逻辑要在2个及以上组件间共享时才提取，返回值推荐用[value, setter]元组或{ data, error, loading }对象，确保Hook的单一职责。
性能规则直接给出了"不要做什么"：不要在JSX props里直接创建对象/数组（比如<Comp data={{ id: 1 }} />），否则会触发子组件不必要的重渲染；React.memo必须在profiling确认无效重渲染后再用；useMemo/useCallback只在计算昂贵或需要稳定引用时使用（比如传给memoized子组件的函数）。

使用前需要注意这些事

这个技能的规则都是React 19及以上版本的专属特性，如果你的项目还在用React 18，use() Hook、useActionState等API无法直接使用。另外，Server Components和'use client'指令依赖Next.js或React Native的底层支持，不要在纯React DOM项目中强行套用。性能规则里的"避免在props中创建对象"虽然普遍适用，但如果是只渲染一次的叶子组件，偶尔这样做也不会有明显影响——规则是为了平衡可维护性和性能，不是绝对的教条。

截图预览

使用场景

正在重构 React 19 项目，需要把顶层的 `'use client'` 下沉到真正需要交互的叶子组件，减少客户端打包体积，并按独立的数据获取单元放置 Suspense 边界，恢复流式渲染。
准备为读取 `Promise` 或 `Context` 的组件引入 `use()`，需要在条件或循环中调用，并用 Suspense 包裹这些使用 `use()` 的组件，避免阻塞整页渲染。
实现表单提交或乐观更新时，需要用 `useActionState` 管理 Server Action 的状态，并用 `useOptimistic` 对列表增删改做即时反馈，同时遵守避免 prop drilling 超过两层的规则。
排查组件重渲染时，需要在 JSX props 中避免直接创建对象或数组，并在 profiling 确认无效重渲染后再使用 `React.memo`，为昂贵计算或稳定引用使用 `useMemo`/`useCallback`。

适合人员

使用 React 19 与 Next.js 开发中大型应用的前后端工程师，需要在组件拆分、客户端边界与数据获取单元之间做一致取舍，减少重复返工。
负责前端性能优化的工程师，需要依据 profiling 结果决定是否使用 `React.memo`，并针对昂贵计算与稳定引用合理使用 `useMemo` 和 `useCallback`。
需要沉淀共享逻辑的前端工程师，希望按统一约定编写自定义 Hook（`use` 前缀、单一关注点、明确的返回结构），以便在多个组件中复用。
在现有 React 项目中引入 Server Components 与 Server Actions 的技术负责人，需要在保持交互能力的同时控制客户端代码体积与流式渲染边界。

React 模式精要