尧图网页设计 
React 现代化改造实战指南版本升级、Class 迁移 Hooks 与 React 18 并发特性【免费下载链接】agentsMulti-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity项目地址: https://gitcode.com/GitHub_Trending/agents24/agents本篇技术指南以 agents24/agents 仓库中framework-migration插件所附带的react-modernization技能为骨架系统讲解 React 应用的现代化改造路径从 React 16→17→18 的版本升级与破坏性变更应对到 Class 组件向 Hooks 的迁移、并发特性Suspense、Transitions的落地以及 jscodeshift 自动化重构与性能优化。读完本文你将掌握一套可复制、可验证的 React 现代化改造清单并能结合仓库内的配套智能体与命令完成从评估、迁移到验证的完整流程。技能定位framework-migration 插件中的 React 现代化能力本技能定义于 react-modernization/SKILL.md归属于framework-migration插件。从该技能的 frontmatter 可以看出它面向四类典型场景升级 React 应用至最新版本、将 Class 组件迁移为带 Hooks 的函数组件、采纳 React 并发特性Suspense、Transitions、以及应用 codemods 进行自动化重构。技能正文只给出核心骨架更完整的模式与模板位于其配套的 references/details.md其中包含 codemods 自动化、性能优化、TypeScript 迁移与完整迁移检查清单本文会一并展开。在仓库中该技能与framework-migration插件下的其他组件形成完整工作流核心命令 legacy-modernize.md 以“绞杀者模式”strangler fig pattern编排 13 步渐进式迁移评估 → 测试覆盖 → 增量迁移 → 性能验证 → 下线与文档化legacy-modernizer.md 负责老旧代码库评估architect-review.md 提供架构审查code-migrate.md 生成迁移计划与脚本deps-upgrade.md 则负责依赖升级的风险检测。React 现代化正是这套体系在框架迁移维度上的具体落点。适用场景什么时候使用本技能根据技能文档When to Use 覆盖以下六类典型任务将 React 应用升级到最新版本将 Class 组件迁移为带 Hooks 的函数组件采纳 React 并发特性Suspense、Transitions应用 codemods 进行自动化重构现代化状态管理模式迁移到 TypeScript借助 React 18 特性提升性能无论你面对的是一个多年未升级的老项目还是一个状态管理混乱、Class 组件遍地的新项目本技能给出的都是先版本后架构、先自动化后手工的渐进式路径。版本升级路径React 16 → 17 → 18React 17为并发铺路的过渡版本React 17 被称为升级友好的版本它本身不引入新功能但为 React 18 的并发渲染扫清了障碍。技能文档列出的关键变化事件委托变更React 17 将事件挂载从document改为根容器节点解决了多版本 React 嵌套时的冲突问题取消事件池化不再存在合成事件对象复用event pooling机制异步读取事件属性不再需要e.persist()Effect 清理时机调整useEffect清理函数的执行时机发生变化对依赖外部资源的组件有影响新的 JSX 转换无需再显式import React编译器会自动注入jsxruntime其中新 JSX 转换意味着升级到 17 后大量文件的import React from react可以被清理这一步也可以通过 codemod 自动完成见下文更新 React imports。React 18并发时代React 18 是技能文档强调的重头戏其关键变更包括特性说明自动批处理Automatic Batching所有更新默认合并为一次重渲染包括 Promise、setTimeout 等异步回调中的更新并发渲染Concurrent Rendering渲染可被中断、可插队配合 Transitions 使用Strict Mode 双重调用开发环境下组件函数、初始化函数等会被调用两次用于暴露副作用问题新 Root APIReactDOM.render弃用改为createRoot(...).render(...)服务端 SuspenserenderToString被renderToPipeableStream等流式 API 取代仓库中的 deps-upgrade.md 对 React 跨版本破坏性变更给出了系统化的检测逻辑可作为补充例如 16→17 关注事件委托变更、无事件池化、useEffect 清理时机17→18 关注自动批处理、更严格的 StrictMode、Suspense 变化、新 Root API。技能文档还提示了更早的 15→16 时代的关键变化PropTypes 独立成包、React.createClass弃用、字符串 ref 弃用说明完整的现代化改造往往需要回溯处理历史遗留 API。Class 到 Hooks 迁移状态管理从 setState 到 useState技能文档给出了最经典的计数组件对照// Before: Class component class Counter extends React.Component { constructor(props) { super(props); this.state { count: 0, name: , }; } increment () { this.setState({ count: this.state.count 1 }); }; render() { return ( div pCount: {this.state.count}/p button onClick{this.increment}Increment/button /div ); } } // After: Functional component with hooks function Counter() { const [count, setCount] useState(0); const [name, setName] useState(); const increment () { setCount(count 1); }; return ( div pCount: {count}/p button onClick{increment}Increment/button /div ); }迁移要点this.state的每个字段拆分为独立的useState调用this.setState替换为对应的 setterthis引用全部移除。需要注意Class 中this.state是整体合并而 Hooks 的 setter 是字段级替换这要求开发者把复合状态显式拆开或在更新时自行展开旧值。生命周期方法映射到 useEffectClass 组件的componentDidMount、componentDidUpdate、componentWillUnmount三个生命周期在函数组件中统一收敛到useEffect。技能文档中的数据获取示例清晰展示了这种映射// Before: Lifecycle methods class DataFetcher extends React.Component { state { data: null, loading: true }; componentDidMount() { this.fetchData(); } componentDidUpdate(prevProps) { if (prevProps.id ! this.props.id) { this.fetchData(); } } componentWillUnmount() { this.cancelRequest(); } fetchData async () { const data await fetch(/api/${this.props.id}); this.setState({ data, loading: false }); }; cancelRequest () { // Cleanup }; render() { if (this.state.loading) return divLoading.../div; return div{this.state.data}/div; } } // After: useEffect hook function DataFetcher({ id }) { const [data, setData] useState(null); const [loading, setLoading] useState(true); useEffect(() { let cancelled false; const fetchData async () { try { const response await fetch(/api/${id}); const result await response.json(); if (!cancelled) { setData(result); setLoading(false); } } catch (error) { if (!cancelled) { console.error(error); } } }; fetchData(); // Cleanup function return () { cancelled true; }; }, [id]); // Re-run when id changes if (loading) return divLoading.../div; return div{data}/div; }这个示例蕴含三个关键模式依赖数组替代条件更新Class 中用prevProps.id ! this.props.id判断是否重新请求Hooks 中直接以[id]作为依赖数组id变化即重跑 effect。清理函数替代 componentWillUnmounteffect 返回的清理函数负责取消订阅、清除定时器此处用cancelled标志防止卸载后的状态更新。错误处理内联化try/catch中同样检查cancelled避免内存泄漏与 React 警告。Context 与 HOC收敛为 useContext 与自定义 Hook技能文档还展示了高阶组件HOC与 Context 消费的现代化路径// Before: Context consumer and HOC const ThemeContext React.createContext(); class ThemedButton extends React.Component { static contextType ThemeContext; render() { return ( button style{{ background: this.context.theme }} {this.props.children} /button ); } } // After: useContext hook function ThemedButton({ children }) { const { theme } useContext(ThemeContext); return button style{{ background: theme }}{children}/button; } // Before: HOC for data fetching function withUser(Component) { return class extends React.Component { state { user: null }; componentDidMount() { fetchUser().then((user) this.setState({ user })); } render() { return Component {...this.props} user{this.state.user} /; } }; } // After: Custom hook function useUser() { const [user, setUser] useState(null); useEffect(() { fetchUser().then(setUser); }, []); return user; } function UserProfile() { const user useUser(); if (!user) return divLoading.../div; return div{user.name}/div; }这里值得注意的迁移收益static contextType一次只能消费一个 Context而useContext可在同一组件中任意组合多个 ContextHOC 的属性代理 包装组件模式被自定义 Hook 取代后数据来源一目了然也不再引入额外的组件层级。React 18 并发特性落地新 Root APIReact 18 最直接的迁移动作是根节点渲染方式的改变// Before: React 17 import ReactDOM from react-dom; ReactDOM.render(App /, document.getElementById(root)); // After: React 18 import { createRoot } from react-dom/client; const root createRoot(document.getElementById(root)); root.render(App /);同时ReactDOM.hydrate在 18 中对应改为hydrateRoot卸载从ReactDOM.unmountComponentAtNode(container)改为root.unmount()。配合 Strict Mode 双重调用进行验证是升级 18 后的标准动作。自动批处理与 flushSyncReact 18 中批处理不再局限于 React 事件处理器内部——Promise、setTimeout、原生事件监听器中的多次 setState 也会被合并为一次重渲染// React 18: All updates are batched function handleClick() { setCount((c) c 1); setFlag((f) !f); // Only one re-render (batched) } // Even in async: setTimeout(() { setCount((c) c 1); setFlag((f) !f); // Still batched in React 18! }, 1000); // Opt out if needed import { flushSync } from react-dom; flushSync(() { setCount((c) c 1); }); // Re-render happens here setFlag((f) !f); // Another re-render当某个更新必须同步提交例如需要立即读取更新后的 DOM时用flushSync包裹即可退出批处理。技能文档同时给出了状态更新使用函数式写法setCount((c) c 1)的建议这在并发渲染与批处理场景下能避免基于陈旧闭包的计算错误。Transitions区分紧急与非紧急更新useTransition让开发者显式标记非紧急更新使输入保持响应import { useState, useTransition } from react; function SearchResults() { const [query, setQuery] useState(); const [results, setResults] useState([]); const [isPending, startTransition] useTransition(); const handleChange (e) { // Urgent: Update input immediately setQuery(e.target.value); // Non-urgent: Update results (can be interrupted) startTransition(() { setResults(searchResults(e.target.value)); }); }; return ( input value{query} onChange{handleChange} / {isPending Spinner /} Results data{results} / / ); }核心思路是急事先行输入框的query更新属于紧急更新立即渲染而基于查询结果的results更新放入 Transition 中可被新的输入打断。isPending用于在结果尚未就绪时展示加载指示。类似的还有useDeferredValue适合将跟随用户输入的派生计算标记为可延迟。Suspense 数据获取React 18 的 Suspense 让组件可以挂起等待异步数据import { Suspense } from react; // Resource-based data fetching (with React 18) const resource fetchProfileData(); function ProfilePage() { return ( Suspense fallback{Loading /} ProfileDetails / Suspense fallback{Loading /} ProfileTimeline / /Suspense /Suspense ); } function ProfileDetails() { // This will suspend if data not ready const user resource.user.read(); return h1{user.name}/h1; } function ProfileTimeline() { const posts resource.posts.read(); return Timeline posts{posts} /; }嵌套的Suspense可以实现细粒度的加载状态ProfileDetails与ProfileTimeline各自独立挂起、独立展示 fallback。技能文档同时提示React 18 在服务端也引入了 Suspense 支持流式 SSR。Codemods 自动化重构运行官方 react-codemod手工改造海量 Class 组件不现实技能文档推荐先用 codemods 处理机械性工作。以 jscodeshift 为例transform 文件来自 reactjs/react-codemod 项目请先将其下载到本地再替换下述transform-path占位符# Rename unsafe lifecycle methods npx jscodeshift -t transform-path/rename-unsafe-lifecycles.js src/ # Update React imports (React 17) npx jscodeshift -t transform-path/update-react-imports.js src/ # Add error boundaries npx jscodeshift -t transform-path/error-boundaries.js src/ # For TypeScript files npx jscodeshift -t transform-path/rename-unsafe-lifecycles.js --parsertsx src/ # Dry run to preview changes npx jscodeshift -t transform-path/rename-unsafe-lifecycles.js --dry --print src/ # Class to Hooks (third-party) npx codemod react/hooks/convert-class-to-function src/三个命令分别解决三类高频问题rename-unsafe-lifecycles重命名不安全的生命周期如componentWillMount→UNSAFE_componentWillMountupdate-react-imports适配 React 17 的 JSX 转换移除多余 importerror-boundaries自动包裹错误边界。--dry --print组合可以在真正改动前预览全部变更是 codemod 流程中必须养成的习惯。自定义 Codemod 模板当官方 transform 不满足需求时技能文档给出了自定义 codemod 的骨架// custom-codemod.js module.exports function (file, api) { const j api.jscodeshift; const root j(file.source); // Find setState calls root .find(j.CallExpression, { callee: { type: MemberExpression, property: { name: setState }, }, }) .forEach((path) { // Transform to useState // ... transformation logic }); return root.toSource(); }; // Run: jscodeshift -t custom-codemod.js src/其核心机制是用 jscodeshift 的 API 将源码解析为 AST通过find 类型断言定位目标节点这里示例定位setState调用在forEach中改写节点最后用root.toSource()输出新代码。这套模式可以推广到任意模式匹配 转换的重构场景。性能优化useMemo、useCallback 与代码分割记忆化三件套技能文档的 references/details.md 给出了完整的性能优化模式function ExpensiveComponent({ items, filter }) { // Memoize expensive calculation const filteredItems useMemo(() { return items.filter((item) item.category filter); }, [items, filter]); // Memoize callback to prevent child re-renders const handleClick useCallback((id) { console.log(Clicked:, id); }, []); // No dependencies, never changes return List items{filteredItems} onClick{handleClick} /; } // Child component with memo const List React.memo(({ items, onClick }) { return items.map((item) ( Item key{item.id} item{item} onClick{onClick} / )); });useMemo缓存开销大的计算结果依赖为[items, filter]useCallback缓存函数引用空依赖即永不变化React.memo对子组件做浅比较跳过无意义重渲染。三者组合是函数组件时代替代shouldComponentUpdate/PureComponent的标准方案。代码分割lazy Suspenseimport { lazy, Suspense } from react; // Lazy load components const Dashboard lazy(() import(./Dashboard)); const Settings lazy(() import(./Settings)); function App() { return ( Suspense fallback{Loading /} Routes Route path/dashboard element{Dashboard /} / Route path/settings element{Settings /} / /Routes /Suspense ); }配合 React Router 的按路由分割首屏只加载必要代码Suspense的 fallback 在 chunk 加载期间展示——这与 React 18 的 Suspense 数据获取共享同一套心智模型。迁移到 TypeScript技能文档给出了从 JavaScript 到 TypeScript 的组件化改造示例// Before: JavaScript function Button({ onClick, children }) { return button onClick{onClick}{children}/button; } // After: TypeScript interface ButtonProps { onClick: () void; children: React.ReactNode; } function Button({ onClick, children }: ButtonProps) { return button onClick{onClick}{children}/button; } // Generic components interface ListPropsT { items: T[]; renderItem: (item: T) React.ReactNode; } function ListT({ items, renderItem }: ListPropsT) { return {items.map(renderItem)}/; }要点包括为 props 定义 interfacechildren统一使用React.ReactNode、用泛型实现通用组件。结合 deps-upgrade.md 中的升级指引React 18 升级时还应同步更新types/react并在迁移后用tsc全量类型检查兜底。迁移检查清单技能文档在 references/details.md 中沉淀了一份可直接执行的检查清单覆盖迁移全周期迁移前增量更新依赖不要一次性全部升级审查版本发布说明中的破坏性变更搭建测试套件创建功能分支Class → Hooks 迁移识别待迁移的 Class 组件从叶子组件无子组件开始将 state 转换为 useState将生命周期转换为 useEffect将 Context 转换为 useContext抽取自定义 Hooks充分测试React 18 升级如需要先升级到 React 17将 react 与 react-dom 升级到 18使用 TypeScript 时更新 types/react切换到 createRoot API使用 StrictMode双重调用测试处理并发渲染相关问题在收益明显的场景采纳 Suspense/Transitions性能定位性能瓶颈适当添加 React.memo对昂贵操作使用 useMemo/useCallback实现代码分割优化重渲染测试更新测试工具React Testing Library使用 React 18 特性编写测试检查控制台警告性能测试其中先升级 17、再升级 18与从叶子组件开始迁移两条顺序建议值得特别强调——它们把大爆炸式迁移拆解为可验证的小步与仓库中 legacy-modernize.md 命令坚持的每步产出文件、到达检查点必须停下征求确认的渐进式方法论一脉相承。仓库配套把技能嵌入完整迁移工作流react-modernization 技能并不是孤立文档在framework-migration插件中可以找到它的完整配套legacy-modernize.md13 步渐进式迁移编排覆盖评估、测试覆盖建立、绞杀者式增量替换、性能验证与下线其中 Step 8 会根据评估检测到的语言栈指派对应栈的专家子代理完成首轮组件现代化。legacy-modernizer.md负责技术债盘点、依赖与弃用 API 扫描、架构反模式识别其输出直接决定 React 现代化改造的优先级排序。architect-review.md在迁移前后对组件边界、状态管理方案与架构一致性进行审查确保改造没有引入新的架构债务。code-migrate.md提供迁移评估与规划框架其风险模式库中明确将componentWillMount、componentWillReceiveProps标记为高危弃用 API——这正是本技能 Class→Hooks 迁移要消灭的目标。deps-upgrade.md对 React 各主版本间的破坏性变更做程序化检测并给出npm install react{version} react-dom{version}的升级命令与构建/测试/覆盖率三重验证动作。总结React 现代化改造是一条版本先行、自动化铺路、手工精修的路径先按 React 16→17→18 的破坏性变更清单完成升级再用 codemods 批量处理机械性重构随后将 Class 组件按state → useState、生命周期 → useEffect、Context/HOC → useContext/自定义 Hook的映射逐层迁移最后以并发特性、记忆化与代码分割收尾性能优化。本技能及 references/details.md 中的检查清单配合framework-migration插件的评估、审查与编排能力可以让整个改造过程可计划、可验证、可回滚。【免费下载链接】agentsMulti-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity项目地址: https://gitcode.com/GitHub_Trending/agents24/agents创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React 现代化改造实战指南：版本升级、Class 迁移 Hooks 与 React 18 并发特性
React 现代化改造实战指南版本升级、Class 迁移 Hooks 与 React 18 并发特性【免费下载链接】agentsMulti-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity项目地址: https://gitcode.com/GitHub_Trending/agents24/agents本篇技术指南以 agents24/agents 仓库中framework-migration插件所附带的react-modernization技能为骨架系统讲解 React 应用的现代化改造路径从 React 16→17→18 的版本升级与破坏性变更应对到 Class 组件向 Hooks 的迁移、并发特性Suspense、Transitions的落地以及 jscodeshift 自动化重构与性能优化。读完本文你将掌握一套可复制、可验证的 React 现代化改造清单并能结合仓库内的配套智能体与命令完成从评估、迁移到验证的完整流程。技能定位framework-migration 插件中的 React 现代化能力本技能定义于 react-modernization/SKILL.md归属于framework-migration插件。从该技能的 frontmatter 可以看出它面向四类典型场景升级 React 应用至最新版本、将 Class 组件迁移为带 Hooks 的函数组件、采纳 React 并发特性Suspense、Transitions、以及应用 codemods 进行自动化重构。技能正文只给出核心骨架更完整的模式与模板位于其配套的 references/details.md其中包含 codemods 自动化、性能优化、TypeScript 迁移与完整迁移检查清单本文会一并展开。在仓库中该技能与framework-migration插件下的其他组件形成完整工作流核心命令 legacy-modernize.md 以“绞杀者模式”strangler fig pattern编排 13 步渐进式迁移评估 → 测试覆盖 → 增量迁移 → 性能验证 → 下线与文档化legacy-modernizer.md 负责老旧代码库评估architect-review.md 提供架构审查code-migrate.md 生成迁移计划与脚本deps-upgrade.md 则负责依赖升级的风险检测。React 现代化正是这套体系在框架迁移维度上的具体落点。适用场景什么时候使用本技能根据技能文档When to Use 覆盖以下六类典型任务将 React 应用升级到最新版本将 Class 组件迁移为带 Hooks 的函数组件采纳 React 并发特性Suspense、Transitions应用 codemods 进行自动化重构现代化状态管理模式迁移到 TypeScript借助 React 18 特性提升性能无论你面对的是一个多年未升级的老项目还是一个状态管理混乱、Class 组件遍地的新项目本技能给出的都是先版本后架构、先自动化后手工的渐进式路径。版本升级路径React 16 → 17 → 18React 17为并发铺路的过渡版本React 17 被称为升级友好的版本它本身不引入新功能但为 React 18 的并发渲染扫清了障碍。技能文档列出的关键变化事件委托变更React 17 将事件挂载从document改为根容器节点解决了多版本 React 嵌套时的冲突问题取消事件池化不再存在合成事件对象复用event pooling机制异步读取事件属性不再需要e.persist()Effect 清理时机调整useEffect清理函数的执行时机发生变化对依赖外部资源的组件有影响新的 JSX 转换无需再显式import React编译器会自动注入jsxruntime其中新 JSX 转换意味着升级到 17 后大量文件的import React from react可以被清理这一步也可以通过 codemod 自动完成见下文更新 React imports。React 18并发时代React 18 是技能文档强调的重头戏其关键变更包括特性说明自动批处理Automatic Batching所有更新默认合并为一次重渲染包括 Promise、setTimeout 等异步回调中的更新并发渲染Concurrent Rendering渲染可被中断、可插队配合 Transitions 使用Strict Mode 双重调用开发环境下组件函数、初始化函数等会被调用两次用于暴露副作用问题新 Root APIReactDOM.render弃用改为createRoot(...).render(...)服务端 SuspenserenderToString被renderToPipeableStream等流式 API 取代仓库中的 deps-upgrade.md 对 React 跨版本破坏性变更给出了系统化的检测逻辑可作为补充例如 16→17 关注事件委托变更、无事件池化、useEffect 清理时机17→18 关注自动批处理、更严格的 StrictMode、Suspense 变化、新 Root API。技能文档还提示了更早的 15→16 时代的关键变化PropTypes 独立成包、React.createClass弃用、字符串 ref 弃用说明完整的现代化改造往往需要回溯处理历史遗留 API。Class 到 Hooks 迁移状态管理从 setState 到 useState技能文档给出了最经典的计数组件对照// Before: Class component class Counter extends React.Component { constructor(props) { super(props); this.state { count: 0, name: , }; } increment () { this.setState({ count: this.state.count 1 }); }; render() { return ( div pCount: {this.state.count}/p button onClick{this.increment}Increment/button /div ); } } // After: Functional component with hooks function Counter() { const [count, setCount] useState(0); const [name, setName] useState(); const increment () { setCount(count 1); }; return ( div pCount: {count}/p button onClick{increment}Increment/button /div ); }迁移要点this.state的每个字段拆分为独立的useState调用this.setState替换为对应的 setterthis引用全部移除。需要注意Class 中this.state是整体合并而 Hooks 的 setter 是字段级替换这要求开发者把复合状态显式拆开或在更新时自行展开旧值。生命周期方法映射到 useEffectClass 组件的componentDidMount、componentDidUpdate、componentWillUnmount三个生命周期在函数组件中统一收敛到useEffect。技能文档中的数据获取示例清晰展示了这种映射// Before: Lifecycle methods class DataFetcher extends React.Component { state { data: null, loading: true }; componentDidMount() { this.fetchData(); } componentDidUpdate(prevProps) { if (prevProps.id ! this.props.id) { this.fetchData(); } } componentWillUnmount() { this.cancelRequest(); } fetchData async () { const data await fetch(/api/${this.props.id}); this.setState({ data, loading: false }); }; cancelRequest () { // Cleanup }; render() { if (this.state.loading) return divLoading.../div; return div{this.state.data}/div; } } // After: useEffect hook function DataFetcher({ id }) { const [data, setData] useState(null); const [loading, setLoading] useState(true); useEffect(() { let cancelled false; const fetchData async () { try { const response await fetch(/api/${id}); const result await response.json(); if (!cancelled) { setData(result); setLoading(false); } } catch (error) { if (!cancelled) { console.error(error); } } }; fetchData(); // Cleanup function return () { cancelled true; }; }, [id]); // Re-run when id changes if (loading) return divLoading.../div; return div{data}/div; }这个示例蕴含三个关键模式依赖数组替代条件更新Class 中用prevProps.id ! this.props.id判断是否重新请求Hooks 中直接以[id]作为依赖数组id变化即重跑 effect。清理函数替代 componentWillUnmounteffect 返回的清理函数负责取消订阅、清除定时器此处用cancelled标志防止卸载后的状态更新。错误处理内联化try/catch中同样检查cancelled避免内存泄漏与 React 警告。Context 与 HOC收敛为 useContext 与自定义 Hook技能文档还展示了高阶组件HOC与 Context 消费的现代化路径// Before: Context consumer and HOC const ThemeContext React.createContext(); class ThemedButton extends React.Component { static contextType ThemeContext; render() { return ( button style{{ background: this.context.theme }} {this.props.children} /button ); } } // After: useContext hook function ThemedButton({ children }) { const { theme } useContext(ThemeContext); return button style{{ background: theme }}{children}/button; } // Before: HOC for data fetching function withUser(Component) { return class extends React.Component { state { user: null }; componentDidMount() { fetchUser().then((user) this.setState({ user })); } render() { return Component {...this.props} user{this.state.user} /; } }; } // After: Custom hook function useUser() { const [user, setUser] useState(null); useEffect(() { fetchUser().then(setUser); }, []); return user; } function UserProfile() { const user useUser(); if (!user) return divLoading.../div; return div{user.name}/div; }这里值得注意的迁移收益static contextType一次只能消费一个 Context而useContext可在同一组件中任意组合多个 ContextHOC 的属性代理 包装组件模式被自定义 Hook 取代后数据来源一目了然也不再引入额外的组件层级。React 18 并发特性落地新 Root APIReact 18 最直接的迁移动作是根节点渲染方式的改变// Before: React 17 import ReactDOM from react-dom; ReactDOM.render(App /, document.getElementById(root)); // After: React 18 import { createRoot } from react-dom/client; const root createRoot(document.getElementById(root)); root.render(App /);同时ReactDOM.hydrate在 18 中对应改为hydrateRoot卸载从ReactDOM.unmountComponentAtNode(container)改为root.unmount()。配合 Strict Mode 双重调用进行验证是升级 18 后的标准动作。自动批处理与 flushSyncReact 18 中批处理不再局限于 React 事件处理器内部——Promise、setTimeout、原生事件监听器中的多次 setState 也会被合并为一次重渲染// React 18: All updates are batched function handleClick() { setCount((c) c 1); setFlag((f) !f); // Only one re-render (batched) } // Even in async: setTimeout(() { setCount((c) c 1); setFlag((f) !f); // Still batched in React 18! }, 1000); // Opt out if needed import { flushSync } from react-dom; flushSync(() { setCount((c) c 1); }); // Re-render happens here setFlag((f) !f); // Another re-render当某个更新必须同步提交例如需要立即读取更新后的 DOM时用flushSync包裹即可退出批处理。技能文档同时给出了状态更新使用函数式写法setCount((c) c 1)的建议这在并发渲染与批处理场景下能避免基于陈旧闭包的计算错误。Transitions区分紧急与非紧急更新useTransition让开发者显式标记非紧急更新使输入保持响应import { useState, useTransition } from react; function SearchResults() { const [query, setQuery] useState(); const [results, setResults] useState([]); const [isPending, startTransition] useTransition(); const handleChange (e) { // Urgent: Update input immediately setQuery(e.target.value); // Non-urgent: Update results (can be interrupted) startTransition(() { setResults(searchResults(e.target.value)); }); }; return ( input value{query} onChange{handleChange} / {isPending Spinner /} Results data{results} / / ); }核心思路是急事先行输入框的query更新属于紧急更新立即渲染而基于查询结果的results更新放入 Transition 中可被新的输入打断。isPending用于在结果尚未就绪时展示加载指示。类似的还有useDeferredValue适合将跟随用户输入的派生计算标记为可延迟。Suspense 数据获取React 18 的 Suspense 让组件可以挂起等待异步数据import { Suspense } from react; // Resource-based data fetching (with React 18) const resource fetchProfileData(); function ProfilePage() { return ( Suspense fallback{Loading /} ProfileDetails / Suspense fallback{Loading /} ProfileTimeline / /Suspense /Suspense ); } function ProfileDetails() { // This will suspend if data not ready const user resource.user.read(); return h1{user.name}/h1; } function ProfileTimeline() { const posts resource.posts.read(); return Timeline posts{posts} /; }嵌套的Suspense可以实现细粒度的加载状态ProfileDetails与ProfileTimeline各自独立挂起、独立展示 fallback。技能文档同时提示React 18 在服务端也引入了 Suspense 支持流式 SSR。Codemods 自动化重构运行官方 react-codemod手工改造海量 Class 组件不现实技能文档推荐先用 codemods 处理机械性工作。以 jscodeshift 为例transform 文件来自 reactjs/react-codemod 项目请先将其下载到本地再替换下述transform-path占位符# Rename unsafe lifecycle methods npx jscodeshift -t transform-path/rename-unsafe-lifecycles.js src/ # Update React imports (React 17) npx jscodeshift -t transform-path/update-react-imports.js src/ # Add error boundaries npx jscodeshift -t transform-path/error-boundaries.js src/ # For TypeScript files npx jscodeshift -t transform-path/rename-unsafe-lifecycles.js --parsertsx src/ # Dry run to preview changes npx jscodeshift -t transform-path/rename-unsafe-lifecycles.js --dry --print src/ # Class to Hooks (third-party) npx codemod react/hooks/convert-class-to-function src/三个命令分别解决三类高频问题rename-unsafe-lifecycles重命名不安全的生命周期如componentWillMount→UNSAFE_componentWillMountupdate-react-imports适配 React 17 的 JSX 转换移除多余 importerror-boundaries自动包裹错误边界。--dry --print组合可以在真正改动前预览全部变更是 codemod 流程中必须养成的习惯。自定义 Codemod 模板当官方 transform 不满足需求时技能文档给出了自定义 codemod 的骨架// custom-codemod.js module.exports function (file, api) { const j api.jscodeshift; const root j(file.source); // Find setState calls root .find(j.CallExpression, { callee: { type: MemberExpression, property: { name: setState }, }, }) .forEach((path) { // Transform to useState // ... transformation logic }); return root.toSource(); }; // Run: jscodeshift -t custom-codemod.js src/其核心机制是用 jscodeshift 的 API 将源码解析为 AST通过find 类型断言定位目标节点这里示例定位setState调用在forEach中改写节点最后用root.toSource()输出新代码。这套模式可以推广到任意模式匹配 转换的重构场景。性能优化useMemo、useCallback 与代码分割记忆化三件套技能文档的 references/details.md 给出了完整的性能优化模式function ExpensiveComponent({ items, filter }) { // Memoize expensive calculation const filteredItems useMemo(() { return items.filter((item) item.category filter); }, [items, filter]); // Memoize callback to prevent child re-renders const handleClick useCallback((id) { console.log(Clicked:, id); }, []); // No dependencies, never changes return List items{filteredItems} onClick{handleClick} /; } // Child component with memo const List React.memo(({ items, onClick }) { return items.map((item) ( Item key{item.id} item{item} onClick{onClick} / )); });useMemo缓存开销大的计算结果依赖为[items, filter]useCallback缓存函数引用空依赖即永不变化React.memo对子组件做浅比较跳过无意义重渲染。三者组合是函数组件时代替代shouldComponentUpdate/PureComponent的标准方案。代码分割lazy Suspenseimport { lazy, Suspense } from react; // Lazy load components const Dashboard lazy(() import(./Dashboard)); const Settings lazy(() import(./Settings)); function App() { return ( Suspense fallback{Loading /} Routes Route path/dashboard element{Dashboard /} / Route path/settings element{Settings /} / /Routes /Suspense ); }配合 React Router 的按路由分割首屏只加载必要代码Suspense的 fallback 在 chunk 加载期间展示——这与 React 18 的 Suspense 数据获取共享同一套心智模型。迁移到 TypeScript技能文档给出了从 JavaScript 到 TypeScript 的组件化改造示例// Before: JavaScript function Button({ onClick, children }) { return button onClick{onClick}{children}/button; } // After: TypeScript interface ButtonProps { onClick: () void; children: React.ReactNode; } function Button({ onClick, children }: ButtonProps) { return button onClick{onClick}{children}/button; } // Generic components interface ListPropsT { items: T[]; renderItem: (item: T) React.ReactNode; } function ListT({ items, renderItem }: ListPropsT) { return {items.map(renderItem)}/; }要点包括为 props 定义 interfacechildren统一使用React.ReactNode、用泛型实现通用组件。结合 deps-upgrade.md 中的升级指引React 18 升级时还应同步更新types/react并在迁移后用tsc全量类型检查兜底。迁移检查清单技能文档在 references/details.md 中沉淀了一份可直接执行的检查清单覆盖迁移全周期迁移前增量更新依赖不要一次性全部升级审查版本发布说明中的破坏性变更搭建测试套件创建功能分支Class → Hooks 迁移识别待迁移的 Class 组件从叶子组件无子组件开始将 state 转换为 useState将生命周期转换为 useEffect将 Context 转换为 useContext抽取自定义 Hooks充分测试React 18 升级如需要先升级到 React 17将 react 与 react-dom 升级到 18使用 TypeScript 时更新 types/react切换到 createRoot API使用 StrictMode双重调用测试处理并发渲染相关问题在收益明显的场景采纳 Suspense/Transitions性能定位性能瓶颈适当添加 React.memo对昂贵操作使用 useMemo/useCallback实现代码分割优化重渲染测试更新测试工具React Testing Library使用 React 18 特性编写测试检查控制台警告性能测试其中先升级 17、再升级 18与从叶子组件开始迁移两条顺序建议值得特别强调——它们把大爆炸式迁移拆解为可验证的小步与仓库中 legacy-modernize.md 命令坚持的每步产出文件、到达检查点必须停下征求确认的渐进式方法论一脉相承。仓库配套把技能嵌入完整迁移工作流react-modernization 技能并不是孤立文档在framework-migration插件中可以找到它的完整配套legacy-modernize.md13 步渐进式迁移编排覆盖评估、测试覆盖建立、绞杀者式增量替换、性能验证与下线其中 Step 8 会根据评估检测到的语言栈指派对应栈的专家子代理完成首轮组件现代化。legacy-modernizer.md负责技术债盘点、依赖与弃用 API 扫描、架构反模式识别其输出直接决定 React 现代化改造的优先级排序。architect-review.md在迁移前后对组件边界、状态管理方案与架构一致性进行审查确保改造没有引入新的架构债务。code-migrate.md提供迁移评估与规划框架其风险模式库中明确将componentWillMount、componentWillReceiveProps标记为高危弃用 API——这正是本技能 Class→Hooks 迁移要消灭的目标。deps-upgrade.md对 React 各主版本间的破坏性变更做程序化检测并给出npm install react{version} react-dom{version}的升级命令与构建/测试/覆盖率三重验证动作。总结React 现代化改造是一条版本先行、自动化铺路、手工精修的路径先按 React 16→17→18 的破坏性变更清单完成升级再用 codemods 批量处理机械性重构随后将 Class 组件按state → useState、生命周期 → useEffect、Context/HOC → useContext/自定义 Hook的映射逐层迁移最后以并发特性、记忆化与代码分割收尾性能优化。本技能及 references/details.md 中的检查清单配合framework-migration插件的评估、审查与编排能力可以让整个改造过程可计划、可验证、可回滚。【免费下载链接】agentsMulti-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity项目地址: https://gitcode.com/GitHub_Trending/agents24/agents创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考