react-patterns

# React 模式 > 构建生产级 React 应用的原则。 --- ## 1. 组件设计原则 ### 组件类型 | 类型 | 用途 | 状态 | |------|-----|-------| | **服务端组件** | 数据获取、静态内容 | 无 | | **客户端组件** | 交互性 | useState, effects | | **展示型组件** | UI 显示 | 仅 Props | | **容器型组件** | 逻辑/状态 | 复杂状态 | ### 设计规则 - 每个组件只负责一件事 - Props 向下传递，事件向上传递 - 优先使用组合而非继承 - 倾向于小巧、专注的组件 --- ## 2. Hook 模式 ### 何时提取 Hook | 模式 | 提取时机 | |---------|-------------| | **useLocalStorage** | 需要相同的存储逻辑 | | **useDebounce** | 多个防抖值 | | **useFetch** | 重复的获取模式 | | **useForm** | 复杂的表单状态 | ### Hook 规则 - 仅在顶层调用 Hook - 每次渲染顺序保持一致 - 自定义 Hook 以 "use" 开头 - 在卸载时清理副作用 --- ## 3. 状态管理选择 | 复杂度 | 解决方案 | |------------|----------| | 简单 | useState, useReducer | | 共享局部 | Context | | 服务端状态 | React Query, SWR | | 复杂全局 | Zustand, Redux Toolkit | ### 状态放置位置 | 作用域 | 位置 | |-------|-------| | 单个组件 | useState | | 父子组件 | 提升状态 | | 子树 | Context | | 全局 | 全局 Store | --- ## 4. React 19 模式 ### 新增 Hook | Hook | 用途 | |------|---------| | **useActionState** | 表单提交状态 | | **useOptimistic** | 乐观 UI 更新 | | **use** | 在渲染中读取资源 | ### 编译器优势 - 自动记忆化 (Memoization) - 减少手动 useMemo/useCallback - 专注于纯组件 | --- ## 5. 组合模式 ### 复合组件 - 父组件提供 Context - 子组件消费 Context - 基于插槽的灵活组合 - 示例：Tabs, Accordion, Dropdown ### Render Props 与 Hooks | 使用场景 | 推荐 | |----------|--------| | 可复用逻辑 | 自定义 Hook | | 渲染灵活性 | Render props | | 横切关注点 | 高阶组件 (HOC) | --- ## 6. 性能原则 ### 何时优化 | 信号 | 行动 | |--------|--------| | 渲染缓慢 | 先进行性能分析 | | 大列表 | 虚拟化 | | 昂贵计算 | useMemo | | 稳定的回调 | useCallback | ### 优化顺序 1. 确认是否真的慢 2. 使用 DevTools 进行分析 3. 识别瓶颈 4. 应用针对性修复 --- ## 7. 错误处理 ### 错误边界 (Error Boundary) 使用 | 作用域 | 位置 | |-------|-----------| | 全局应用 | R