React

核心用法

React 技能覆盖现代 React 开发的完整技术栈，主要包含六大模块：

1. Hooks 模式 — 深度解析 useState、useEffect、useMemo、useRef 等核心 Hook 的使用范式与陷阱规避，包括异步 Effect 处理、依赖数组优化、清理函数管理等。

2. 状态管理 — 推崇状态就近原则（colocation），避免过早提升状态；指导使用 useReducer 管理复杂联动状态；将 URL 参数纳入状态设计，支持可分享的过滤/排序/分页。

3. 性能优化 — 涵盖并行数据请求（Promise.all）、树摇优化（避免 barrel imports）、昂贵计算缓存（useMemo）、非紧急更新（startTransition）及 useRef 的合理替代场景。

4. 组件模式 — 规范化条件渲染语法（避免 0 误渲染）、稳定 key 生成策略、受控组件初始化等工程实践。

5. React 19+ 特性 — 拥抱表单 Actions 替代 useEffect 突变、useActionState 管理提交状态、useOptimistic 实现乐观更新。

6. 数据获取 — 强调 AbortController 防止竞态、自定义 Hook 返回值缓存、列表 key 的稳定性。

显著优点

• 权威性极强：Meta 官方生态核心，文档与社区资源最丰富
• 现代特性完备：及时跟进 React 19 Actions、Optimistic 等新 API
• 工程实践导向：聚焦真实项目陷阱（内存泄漏、渲染瀑布、状态同步 bug）
• 性能意识深入：从微观（Hook 依赖）到宏观（并发渲染）全链路优化

潜在局限

• 仅限 React 技术栈，不涉及跨框架通用方案
• 部分 React 19 特性需配套服务端环境（Server Actions）
• 对 Class Component 历史代码无覆盖

适合人群

• 中级以上前端开发者，需系统提升 React 工程能力
• 团队技术负责人制定编码规范与性能基线
• 从 Vue/Svelte 迁移至 React 的开发者快速掌握范式差异

常规风险

• 过度使用 useMemo/useCallback 反而增加内存开销 — 应以性能分析为准
• useEffect 滥用导致逻辑分散 — 优先使用事件处理函数或 Actions
• 乐观更新未设计回滚策略 — 需配套错误边界与用户体验兜底