react-patterns

该技能用于指导构建生产级 React 应用，主题包括：组件设计（服务端、客户端、展示型、容器型组件，单一职责、props 向下事件向上、优先组合）；Hook 模式（何时抽取 useLocalStorage、useDebounce、useFetch、useForm，以及只在顶层调用、顺序一致、自定义 Hook 以 use 开头、卸载时清理副作用）；状态管理选择（简单用 useState/useReducer，共享本地用 Context，服务端状态用 React Query/SWR，复杂全局用 Zustand/Redux Toolkit）与状态放置范围。React 19 部分介绍 useActionState（表单提交状态）、useOptimistic（乐观 UI 更新）、use（渲染中读取资源），以及编译器自动记忆化、减少手写 useMemo/useCallback。组合模式含 Compound Components（父提供 context、子消费，适用于 Tabs、Accordion、Dropdown）以及 Render Props 与 Hooks、高阶组件的取舍。性能原则强调先确认是否真慢、用 DevTools Profiling 定位瓶颈再针对性修复，列表虚拟化、useMemo、useCallback。错误处理按应用级、功能级、组件级布置错误边界，并提供回退 UI、日志、重试与保留用户数据。TypeScript 部分给出 props 用 interface、联合与复杂类型用 type、可复用组件用泛型，以及 ReactNode、MouseEventHandler、RefObject 等常用类型。测试按单元（纯函数、Hook）、集成（组件行为）、E2E（用户流程）分层，优先测试用户可见行为、边界、错误态与无障碍。反模式列表包括深层 prop drilling、巨型组件、滥用 useEffect、过早优化、用索引作 key。文件结构以图片为参考（具体内容未提供）。限制：仅在任务明显匹配上述范围时使用；输出不能替代针对具体环境的验证、测试或专家评审；缺少必要输入、权限、安全边界或成功标准时应停下并请求澄清。