React 生产级模式

你在纠结什么

React 项目一旦跨过 demo 阶段，常见问题会堆在一起：组件边界划不清、状态该放本地还是全局、useEffect 越写越多、列表一慢就盲目加 useMemo。团队如果没有一套可复述的约定，review 时只能凭个人经验争论。

技能在讲什么

本技能把 生产级 React 拆成可对照的决策表与规则，而不是 API 教程：

• 组件设计：区分服务端/客户端、展示/容器组件；强调单一职责、props 下传事件上抛、组合优于继承。
• Hooks：说明何时抽 useLocalStorage、useDebounce、useFetch、useForm；强调顶层调用、卸载清理。
• 状态管理：按复杂度映射到 useState/useReducer、Context、React Query/SWR、Zustand/Redux Toolkit，并给出「状态放哪」的作用域表。
• React 19：useActionState、useOptimistic、use 及编译器对记忆化的影响。
• 组合与性能：复合组件、Render Props vs Hooks；优化顺序是「先证明慢 → DevTools → 再针对性改」。
• 工程配套：Error Boundary 分层、TypeScript props 模式、测试优先级，以及深度 props、巨型组件等 反模式 对照表。

适用边界

它是 原则与选型清单，不替代具体项目的架构文档，也不包含某一家 UI 库或框架的完整最佳实践。Server Components 相关能力需结合你实际使用的 Next.js 等版本自行核对。