React

综合评估

React Skill 是一套面向生产环境的 React 19 工程化知识体系，由 clawic.com 维护，定位为开发者的架构决策与编码规范参考。

核心用法

该 Skill 采用结构化决策树方法，指导开发者完成从项目架构到代码实现的全流程：

• 架构决策矩阵：明确 SPA/SSR/Static/Hybrid 渲染模式选择，强制区分 Server State（TanStack Query）与 Client State（Zustand/useState）
• 组件编码规范：强制 Hooks 置顶、派生状态内联计算、50 行 JSX 上限、300 行文件上限、仅使用 Named Exports
• React 19 新特性：深度覆盖 Server Components（零客户端 JS）、use() Hook Suspense 集成、useActionState 服务端表单处理
• 性能优化分级：P0 路由分割与图片优化 → P1 虚拟列表与防抖 → P2 记忆化策略

显著优点

1. 版本前瞻性：首发 React 19 完整支持，包括 Server Components 和 Actions，较社区多数资料领先
2. 决策框架清晰：状态管理决策树、性能优化优先级表降低认知负担
3. 反模式警示：专设「AI Mistakes」章节，针对常见 AI 生成代码错误（useEffect 滥用、Redux 误用服务端状态等）提供纠正方案
4. 工程化深度：涵盖项目结构、TypeScript strict 模式、错误边界部署等生产级要素

潜在局限

• 生态绑定：默认推荐 Next.js + Tailwind + TanStack Query 技术栈，对 Vite/Remix/其他样式方案项目需要额外适配
• Server Components 复杂度：Next.js App Router 心智负担较高，文档虽清晰但实际迁移成本未充分说明
• 测试覆盖较薄：性能测试、E2E 策略提及较少，主要聚焦单元测试模式

适合人群

• 已有 React 基础、寻求工程化升级的中高级开发者
• 计划迁移至 React 19 / Next.js App Router 的团队技术负责人
• 需要统一团队代码规范、减少 Code Review 摩擦的规模化项目

常规风险

• Server/Client 边界混淆：React 19 默认 Server Components，误用 useState 或事件处理会导致构建失败
• Hydration 不匹配：服务端渲染与客户端注水不一致可能引发难以调试的运行时错误
• TanStack Query 缓存策略：不当的 staleTime 配置可能导致数据新鲜度与性能权衡失衡
• React Compiler 依赖：自动记忆化功能需确认团队构建链支持，避免与手动 useMemo 混用产生预期外行为

这是一个面向生产级 React 开发的专业技能文档，聚焦 React 19 及其生态系统的工程化实践。

核心用法：该 Skill 提供从架构决策到代码规范的完整工作流。核心决策矩阵涵盖渲染模式（SPA/SSR/Static）、状态分层（TanStack Query 管服务端、Zustand/useState 管客户端）、样式方案（Tailwind 优先）及表单处理（RHF+Zod）。针对 React 19 新增 Server Components 默认模式、use() Hook、Actions 与 useActionState 等特性提供详细代码示例与边界说明。

显著优点：

• 架构决策树清晰：通过问答式决策流程明确技术选型，避免状态管理混乱
• React 19 全覆盖：Server/Client Component 区分、零客户端 JS 优化、新 Hooks 实践
• 反模式集中曝光：整理 AI 常犯的错误（useEffect 算衍生状态、index 作 key、巨型组件等）并给出正确范式
• 性能优先级分级：P0/P1/P2 三级优化策略，含 React Compiler 自动编译说明
• 文件结构规范：features/ 分层架构与 Colocate-then-extract 原则

潜在局限：

• 假设用户已具备 React 基础，对初学者友好度一般
• 重度绑定 Next.js App Router 生态，对其他框架（Remix、Astro）适配需自行调整
• 状态管理推荐偏向轻量方案，大型复杂状态机场景（如 Redux Toolkit）覆盖不足

适合人群：

• 中高级 React 开发者寻求工程化升级
• 团队技术负责人制定代码规范
• 从 React 18 迁移至 19 的项目维护者
• 需要规避 AI 生成代码常见陷阱的开发者

常规风险：

• 作为纯文档型 Skill（T-MD），本身无执行风险
• 需确保实际项目中 TypeScript strict 模式已启用，否则类型安全建议失效
• Server Components 要求服务端运行时支持，静态导出或旧版 Next.js 需降级处理