用途:提供构建生产级 React 应用的模式与原则,覆盖组件设计、Hooks、状态管理、组合、性能、错误处理、TypeScript 与测试等主题。
主要能力:
- 组件设计:区分 Server、Client、展示型与容器型组件,强调单一职责、自上而下的 props、事件向上传递、组合优于继承。
- Hook 模式:说明何时抽取 useLocalStorage、useDebounce、useFetch、useForm 等自定义 Hook,并列出 Hook 规则(仅顶层调用、每次渲染顺序一致、自定义 Hook 以 use 开头、卸载时清理副作用)。
- 状态管理选择:按复杂度选择 useState/useReducer、Context、React Query/SWR、Zustand/Redux Toolkit,并按作用域决定状态放置位置。
- React 19 模式:列出 useActionState、useOptimistic、use 的用途,以及编译器带来的自动记忆化收益。
- 组合模式:复合组件通过 context 让父提供、子消费,实现灵活插槽组合(如 Tabs、Accordion、Dropdown);根据场景选择自定义 Hook、渲染属性或高阶组件。
- 性能:先分析再优化,针对慢渲染、大列表、昂贵计算、回调稳定性分别采取措施。
- 错误处理:在根级、路由/功能级或风险组件周围放置错误边界,提供回退 UI、记录日志、重试并保留用户数据。
- TypeScript:用 interface 描述组件 props,用 type 处理联合与复杂类型,用泛型支持可复用组件。
- 测试:单元测纯函数与 Hook,集成测组件行为,E2E 测用户流程;优先测试用户可见行为、边界情况、错误状态与可访问性。
- 反模式:避免深层 prop drilling、巨型组件、滥用 useEffect、过早优化、用索引作 key。
使用方式与限制:资料未提供安装命令、代码示例或具体 API 用法,仅给出原则性指导;未提及收费、价格、平台支持或效果保证,这些信息暂未提供。