用途:作为 React 生态的开发指导技能,帮助在组件结构、Hooks、状态管理、性能优化、React 19 新特性、React Server Components(RSC)、Radix UI 与 Shadcn UI、表单、错误处理、测试和无障碍等方面遵循一致规范。
主要能力:
- 组件结构:优先函数组件,保持组件小而专注,用自定义 Hook 抽取复用逻辑,用 TypeScript 定义 props。
- Hooks:遵守 Hooks 规则,合理使用依赖数组与清理函数,避免嵌套 Hook。
- 状态管理:useState 管局部状态,useReducer 管复杂逻辑,Context API 管共享状态,状态尽量靠近使用处,必要时才引入状态库。
- 性能:React 19 的 React Compiler 在构建期自动记忆化,可移除冗余的 React.memo、useMemo、useCallback;仅在编译器无法处理(复杂对象标识、外部依赖、传给第三方库的稳定回调)时手动记忆化,并用 React DevTools Profiler 验证。
- React 19:Actions 用异步函数作为 form action,自动管理 pending/error;useActionState 跟踪结果与 pending;useOptimistic 提供即时反馈;use(promise) 在渲染中读取 Promise,use(Context) 可条件调用;ref 成为普通 prop,无需 forwardRef;useFormStatus 读取父表单状态;文档元数据 API 可将 title/meta/link 提升到 head。
- RSC:区分 Server Component(默认,无状态与事件处理)与 Client Component('use client',可交互);Server Component 可直接 async/await 取数,用 Suspense 流式输出;Client Component 不能直接导入 Server Component,应通过 children 传入;用 revalidatePath/revalidateTag 失效缓存,用 cache() 去重。
- 表单:优先 Actions 与 useActionState,子组件用 useFormStatus,异步提交用 useOptimistic;需要细粒度校验时用受控组件,复杂多步表单可用 React Hook Form 与 Zod。
- 其他:实现 Error Boundary、用 React Testing Library 测试交互与错误场景、使用语义化 HTML 与 ARIA、保证键盘导航与焦点管理。
使用方式:资料未提供具体安装命令或调用方式,仅给出编码规范与代码模板。
适用场景:React 19 项目开发、RSC 架构设计、组件与表单实现、性能优化与代码审查。
限制:资料未说明收费、平台支持范围或版本兼容细节;RSC 与 Next.js 缓存相关内容依赖具体框架,资料未提供完整配置说明。