React 现代化

你在解决什么问题

老项目往往卡在旧版 React、大量类组件和过时的状态写法上。升级大版本时容易踩生命周期与 API 变更；手工把 componentDidMount 改成 useEffect 既慢又容易漏边界。并发模型（Suspense、useTransition）和 TypeScript 迁移如果没有清晰路径，团队会在「能跑」和「能维护」之间反复拉扯。

技能如何帮你推进

本技能把 React 现代化 拆成可核对的目标与约束：先明确版本目标、是否动状态层、是否要 codemod 批量改码，再按最佳实践给出可执行步骤和验证方法（行为一致、测试/冒烟、关键页面回归）。

核心能力包括：

• 版本升级：对齐官方迁移说明，处理破坏性变更与依赖兼容
• 类组件 → Hooks：函数组件、useState / useEffect 及常见模式替换
• 并发特性：在合适场景采用 Suspense、transitions，避免误用导致体验倒退
• 自动化重构：选用并应用 codemods，减少手工 diff 量
• 状态与类型：现代化状态管理模式，按需迁到 TypeScript

需要更细的代码模式与示例时，技能指向 resources/implementation-playbook.md 作为实施手册。

适用边界

任务与 React 栈现代化无关（例如纯后端、非 React 前端框架）时不要用本技能。若问题落在本技能范围外的工具链或领域（特定构建平台、与设计系统无关的 UI 库大换血等），应先缩小范围或换用对应专项技能，避免把「整个前端重写」误当成一次现代化会话。