SuperAPI AI 工具集

react-modernization

前端与建站

查看项目

更新于 10-16 03:13

技能介绍

用途:用于 React 代码库的现代化改造,包括版本升级、类组件转 Hooks、并发特性采用、状态管理模式更新以及迁移到 TypeScript。

主要能力:梳理 React 16→17→18 的破坏性变更(React 17 的事件委托变更、无事件池、JSX 转换;React 18 的自动批处理、并发渲染、StrictMode 双调用、新 root API、服务端 Suspense);演示类组件 state 转 useState、生命周期转 useEffect、Context/HOC 转 useContext 与自定义 Hook;讲解 React 18 的 createRoot、flushSync、useTransition、Suspense 数据获取;介绍 useMemo、useCallback、React.memo 与代码分割;给出 TypeScript 迁移示例和迁移检查清单。

使用方式:涉及 codemod 时可用以下命令保持原样执行:npm install -g jscodeshift;npx react-codeshift --parser=tsx --transform=react-codeshift/transforms/rename-unsafe-lifecycles.js src/;npx react-codeshift --parser=tsx --transform=react-codeshift/transforms/new-jsx-transform.js src/;npx codemod react/hooks/convert-class-to-function src/;jscodeshift -t custom-codemod.js src/。

适用场景:老旧 React 项目升级、类组件重构、性能优化与测试适配。

限制:技能资料的参考文件(如 breaking-changes.md、codemods.md、migration-checklist.md、apply-codemods.sh)仅列出名称,具体内容暂未提供;未提供收费、价格或平台支持信息。