WorkBuddy技能评测 #164 | react-class-to-functional：类组件搬家到 Hooks 的机械活

2026-11-05silcano

基本信息

• 技能名：react-class-to-functional
• 来源仓库 Star 数：31,844（社区重构合集）
• 单技能下载量：平台未公开
• 分类：Frontend
• 数据来源：SkillKit 中央技能库（WorkBuddy 生态的第三方技能市场）

它解决了什么痛点

老 React 项目里一堆 class 组件，想迁移到 hooks 又怕改出 bug：生命周期怎么映射（componentDidMount → useEffect，componentDidUpdate → 依赖数组）、this 绑定怎么清、setState 的回调参数怎么改。手工重构枯燥且容易漏掉清理函数。

对我有没有用（技术 / 自媒体 / AI / 读书）

技术方向：看你有没有老项目。你如果维护的是 Next.js 新项目，基本没 class 组件可迁，用不上。有老项目的话这个技能很省事，尤其是它会把 componentWillUnmount 正确转成 useEffect 的 return 清理函数——这一步人最容易忘，忘了就是内存泄漏。自媒体：可写「class 到 hooks 的映射表」。AI/读书：无关。

典型场景

你接手一个 2019 年的后台页面，20 个 class 组件。装此技能后，AI 逐个转成函数组件，把 componentDidMount 里的请求搬到 useEffect、把 this.state 拆成多个 useState、把事件处理器用 useCallback 包住。成果：代码量减少三成，且没有引入「组件卸载后 setState」的警告。

一句话结论

针对性强的一次性工具。有老 React 代码就值，没有就是占位。

📊 完整对比数据见在线总表：WorkBuddy 技能市场全量调研总表（腾讯文档）