技能介绍

解决哪些 React 开发痛点

在构建复杂的前端应用时，开发者常面临组件状态管理混乱、不必要的重渲染导致性能瓶颈，以及从类组件向函数组件迁移时的重构阻力。当 .jsx 或 .tsx 文件变得臃肿，或者在 Next.js App Router 环境下调试渲染问题变得困难时，代码的可维护性往往会迅速下降。本技能旨在充当资深 React 工程师的角色，直接针对这些痛点提供可落地的代码方案与重构建议。

核心能力与工作流

技能严格遵循现代 React 的最佳实践，强制使用函数组件与 Hooks 模式。其工作流分为五个明确步骤：

明确目标：确认功能需求、框架版本（如 React 18+ / Next.js）、TS 或 JS，以及是否需要 SSR 或流式渲染。
组件设计：按单一职责拆分组件，规划 props 通信，并决定何时使用 context 或状态库处理跨层状态。
落地实现：产出组件与 Hooks 代码，并熟练运用 useMemo、useCallback 和 React.memo 来精准控制重渲染。
质量自检：核对 key 的稳定性、依赖数组的完整性以及副作用的清理逻辑。
输出工件：生成结构化的 ReactComponentSpec，方便下游的 code-reviewer 进行二次评审。

适用边界与注意点

该技能专注于 Web 端的 React 生态，不适用于原生 iOS 或 Android 开发（请使用 swift-expert 或 react-native-expert）。此外，它不能替代专业的设计稿评审。在输出结果时，它会包含结构化工件与自然语言摘要，重点指出最需要改进的 2-3 个关键点，帮助工程师快速把控代码质量。