技能介绍

先解决什么具体问题

React 19 重构了部分底层能力，同时把服务端组件、流式渲染从实验特性推进到常规实践。这些变化带来两类问题：一是旧的Hooks规则不再完全适用，比如use()允许在条件分支和循环中调用，打破了“Hooks不能在条件中调用”的认知；二是性能优化容易陷入反模式，比如为了“减少重渲染”盲目用React.memo，或在JSX的props里直接传对象导致每次渲染都生成新引用，反而触发不必要的更新。此外，服务端组件与客户端组件的边界划分、数据获取单元的流式渲染策略、自定义Hook的抽象时机，也缺乏统一的实践参考。

技能如何组织实践

该技能围绕React 19的核心特性，梳理了可直接落地的设计模式：

处理异步与上下文：用use()直接在渲染中读取Promise或Context，配合<Suspense>包裹使用use()且依赖Promise的组件；
服务端与客户端边界：遵循“把'use client'推到最深”的原则，仅让需要交互的叶子组件成为客户端组件；
服务端操作：覆盖React 19新增的useActionState和useOptimistic，处理表单提交与乐观更新；
边界管理：在独立的数据获取单元外放置<Suspense>边界，避免包裹整个页面（否则会失去流式渲染的优势），同时支持用error.tsx做路由级错误处理；
自定义Hook规范：强制前缀use、仅在2个及以上组件共享逻辑时抽取、保持单一职责，返回[value, setter]元组或{ data, error, loading }对象；
性能规则：明确JSX props中避免创建对象/数组、先通过性能分析再使用React.memo、用useMemo/useCallback处理昂贵计算或传递给记忆化子组件的稳定引用、通过key重置组件状态、就近放置状态、避免超过2层的属性穿透（改用Context或组合）。

适用边界与注意点

该技能的实践依赖React 19的支持，比如use()、useActionState、useOptimistic等特性无法在旧版本中使用。复合组件虽能提升灵活性，但会增加组件间的隐式约定，需结合项目规模权衡是否采用。性能规则中强调“先分析再优化”，避免将React.memo当作默认优化手段——未经过性能分析的盲目使用反而可能增加渲染负担。此外，状态就近放置和避免属性穿透的规则，需要在组件结构设计时提前规划，否则后期重构会涉及多组件调整。