React

核心用法

React 采用声明式组件模型，开发者通过 JSX 描述 UI 结构，利用 useState、useEffect 等 Hooks 管理状态与副作用。核心工作流包括：

• 组件编写：函数组件 + Hooks 替代类组件，逻辑复用通过自定义 Hooks 实现
• 状态管理：useState 处理局部状态，useReducer 管理复杂状态机，React 19 引入 useActionState 简化表单
• 性能优化：useMemo/useCallback 缓存计算与回调，startTransition 区分紧急/非紧急更新
• 并发特性：Fiber 架构支持可中断渲染，useDeferredValue 延迟低优先级更新

显著优点

1. 生态统治力：npm 周下载量超 2000 万，占据 Stack Overflow 调研 40%+ 前端份额
2. 架构前瞻性：Server Components、Actions 等特性持续引领行业标准
3. 开发者体验：Error Boundaries、Strict Mode、DevTools 调试工具链完善
4. 跨平台能力：React Native 共享技术栈，Next.js/Remix 等元框架成熟

潜在缺点与局限性

• 心智负担重：Hooks 规则（只能在顶层调用、依赖数组陷阱）学习曲线陡峭
• 过度渲染问题：默认无细粒度响应式，需手动优化 React.memo 或选择信号方案
• 生态碎片化：状态管理方案泛滥（Redux/Zustand/Jotai/Context），路由方案不统一
• 构建复杂性：JSX 转换、代码分割、SSR 水合等需配合 Babel/Vite/Webpack 配置

适合人群

• 中高级前端工程师构建生产级应用
• 需要 SEO/首屏性能的 SSR/SSG 项目团队
• 追求 TypeScript 全链路类型的类型安全主义者
• 计划跨 Web/Native 复用代码的全栈开发者

常规风险

• 并发竞态：useEffect 中无清理函数或 AbortController 导致内存泄漏与竞态条件
• 状态引用陷阱：直接修改数组/对象后 setState 因引用相同被 React 忽略
• 瀑布请求：顺序 await 阻塞渲染，应使用 Promise.all 并行化
• Key 误用：用索引或随机数作 key 导致组件状态错位或性能崩溃

核心用法

本 Skill 是一份 React 开发最佳实践文档，聚焦于实际编码中的高频问题与解决方案，涵盖五大核心模块：

1. 常见错误（Common Mistakes）

• 条件渲染：{count && <Component />} 在 count 为 0 时会渲染字符串 "0"，应使用 {count > 0 && ...}
• 状态突变：直接修改数组后 setState 不会触发重渲染，必须用展开运算符创建新引用
• 不稳定 Key：key={Math.random()} 导致组件频繁销毁重建，应在数据创建时生成稳定 ID
• 未初始化受控组件：useState() 默认 undefined 会造成受控/非受控切换警告

2. Hooks 陷阱（Hooks Traps）

• useEffect 回调不能直接 async，需内部定义 async 函数再调用
• 副作用清理：订阅、定时器、事件监听必须返回清理函数防止内存泄漏
• 依赖数组陷阱：对象/数组作为依赖会因引用变化导致每次渲染都触发 effect，需用 useMemo 或提取原始值
• useState 同一引用不会触发重渲染，对象/数组更新必须创建新引用

3. 性能优化（Performance）

• 避免请求瀑布：独立请求用 Promise.all([fetchA(), fetchB()]) 并行发起
• 优化导入路径：桶式导入会阻止 Tree-shaking，应使用具体路径导入
• 昂贵计算：useMemo 缓存计算结果，避免每次渲染重新计算
• startTransition：非紧急更新（大数据过滤/排序）用此 API 保持输入响应性
• useRef 替代 useState：定时器、历史值、DOM 测量等无需触发重渲染的场景

4. 状态架构（State Architecture）

• 状态就近原则：避免过度提升状态导致整棵树不必要的重渲染
• 派生优于同步：从现有状态计算的值直接用计算属性，无需额外 state
• useReducer：多个关联状态更新时用 reducer 保证状态一致性
• URL 即状态：筛选/排序/分页状态存入 search params，支持分享和书签

5. React 19+ 表单（Forms）

• 优先使用 form actions 替代 useEffect 进行数据变更，内置 pending、error、乐观更新
• useActionState 管理提交状态，替代手动 loading/error 管理
• useOptimistic 实现乐观更新，服务器确认前即时反馈，出错自动回滚

显著优点

• 实战导向：每个建议都对应具体代码反例和正例，避免抽象说教
• 覆盖全面：从基础条件渲染到 React 19 新特性，新老版本开发者皆适用
• 性能意识强：专门针对生产环境性能瓶颈（瀑布请求、不必要重渲染、Tree-shaking）
• 安全意识：提醒 fetch 使用 AbortController 避免竞态条件

潜在缺点与局限性

• 纯文档无交互：仅为静态指南，无代码示例运行环境或自动化检测
• 版本依赖：React 19+ 特性（form actions、useActionState、useOptimistic）对旧版本用户无意义
• 缺乏框架对比：未涉及与 Vue、Svelte 等其他框架的选型对比
• 无项目结构建议：未覆盖大型 React 项目目录组织、代码分割策略

适合人群

• 初级-中级 React 开发者：系统性地补齐 Hooks 和性能优化知识盲区
• 全栈开发者：快速回顾 React 最佳实践，避免常见陷阱
• 代码审查者：作为团队代码规范的参考依据
• React 19 早期采用者：学习新表单 API 和并发特性用法

常规风险

• 知识过时风险：React 生态迭代快，建议定期核对官方文档验证内容时效性
• 过度优化陷阱：初学者可能滥用 useMemo，反而增加代码复杂度，需理解其适用场景
• 来源可信度：本 Skill 为个人开发者（T3 级别）维护，生产环境重大决策建议交叉验证 React 官方文档或 Meta 官方渠道