遗留的 React 代码库难以维护，且无法获得性能��进。本技能将指导您完成版本升级、Hooks 迁移以及采用 React 18 的并发特性。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-modernization”。 具有 componentDidMount 和 setState 的类组件
预期结果:
使用 useState 管理状态的函数组件，使用 useEffect 和空依赖数组处理挂载逻辑，使用清理函数处理卸载
正在使用“react-modernization”。 React 17 ReactDOM.render 调用
预期结果:
React 18 createRoot API，包含正确的容器元素选择和错误边界设置
正在使用“react-modernization”。 事件处理程序中的同步状态更新
预期结果:
使用 transition 包装的非紧急 UI 更改的状态更新，并提供 isPending 加载指示器
安全审计
安全Static analyzer flagged 48 patterns but all are false positives. This skill contains documentation-only markdown files with React code examples. Dynamic imports are standard React lazy() patterns, shell commands are documentation for codemod usage, and fetch calls are example code snippets. No executable code exists in this skill.
质量评分
你能构建什么
遗留 React 应用程序升级
将较旧的 React 16 应用程序升级到 React 18，获得自动批处理和并发特性
类组件到 Hooks 迁移
将具有生命周期方法的类组件转换为使用 useState 和 useEffect 的现代函数组件
性能优化
实现代码分割、记忆化和 Suspense 边界以提升应用程序性能
试试这些提示
将此 React 类组件转换为使用 Hooks。识别状态变量和生命周期方法，将其转换为 useState 和 useEffect。
分析我的 React 代码库在从 React 17 升级到 18 时的破坏性变更。列出所有需要修改的文件并提供迁移清单。
生成命令以为我的项目运行 React codemods。包括 jscodeshift 安装、生命周期方法的特定转换以及新的 JSX 转换。
重构此搜索组件以使用 useTransition 处理非紧急更新。展示如何实现数据获取的 Suspense 边界以及适当的加载状态。
最佳实践
- 从没有子组件的叶子组件开始增量迁移
- 在每个迁移步骤后运行全面测试，尽早发现回归问题
- 使用 React StrictMode 在开发期间识别不安全的模式和副作用
避免
- 在不测量实际性能问题的情况下添加 useMemo 或 useCallback
- 忘记在 useEffect 依赖数组中包含所有依赖项
- 在同一组件中混合类组件模式和 Hooks