用途:该技能面向 React 代码库的现代化改造,覆盖版本升级、类组件到 Hooks 的迁移、并发特性采用以及自动化重构。适用时机包括升级 React 应用、迁移类组件、采用 Suspense 与 transitions、应用 codemod、更新状态管理模式、迁移到 TypeScript 以及利用 React 18+ 特性改善性能。
主要能力:提供 React 16 → 17 → 18 的版本升级路径与各版本破坏性变更说明(如 React 17 的事件委托、无事件池、effect 清理时机、JSX transform;React 18 的自动批处理、并发渲染、Strict Mode 双调用、新 root API、服务端 Suspense)。演示类组件向函数组件的转换,包括 useState 替代 state、useEffect 替代生命周期方法、useContext 替代 contextType 与 HOC、自定义 Hook 抽取。展示 React 18 的新 root API(createRoot)、自动批处理、flushSync、useTransition、Suspense 数据获取用法。还包含 useMemo/useCallback、React.memo、代码分割(lazy 与 Suspense)等性能优化方式,以及 TypeScript 迁移示例与泛型组件写法。
使用方式:资料给出 codemod 命令示例,如全局安装 jscodeshift 后通过 npx react-codeshift 运行重命名生命周期或新 JSX transform 的转换,以及第三方命令 npx codemod react/hooks/convert-class-to-function src/ 进行类到函数组件的转换。文档还提供迁移检查清单,建议增量更新依赖、先转换叶子组件、逐步转换 state、生命周期与 context,并在每步充分测试。参考资料包括破坏性变更、codemod 使用、Hooks 迁移与并发特性等文档,以及 codemod 配置与自动化脚本。
限制:资料未提供该技能的具体安装方式、版本号、收费模式或平台要求;示例命令与代码片段需结合项目实际验证。部分内容如 Suspense 数据获取和自定义 codemod 属演示性质,直接用于生产前需自行评估。资料也未说明对非 React 项目或其他框架的适用性。