企业官网建设流程全解析

AI 辅助重构实战：Class 组件迁移到 FC+Hooks

在许多长周期维护的大型 React 企业级工程中，依然沉淀着大量使用 React 15 / 16 风格编写的类组件（Class Components，继承自React.Component）。

Class 组件存在三大深刻的现代化演进阻碍：

1. 彻底阻断并发模式与 React 19 核心特性：React 19 的全新特性（如use(),useOptimistic,useActionState）100% 仅支持函数组件（Functional Components / FC），Class 组件完全无法享受并发渲染与异步 Action 的红利；
2. this作用域地狱与绑定样板代码：必须在constructor中疯狂写this.handleClick = this.handleClick.bind(this)，容易因闭包丢失导致Cannot read properties of undefined；
3. 庞大混乱的生命周期钩子（Lifecycle Spaghetti）：同一个订阅逻辑被迫拆碎在componentDidMount（绑定）与componentWillUnmount（解绑）中，随着组件代码膨胀，极难维护。

然而，手动将一个 1,000 行包含复杂状态和生命周期的 Class 组件重构为纯函数组件（FC + Hooks），充满了语法细节地狱。

利用大语言模型（LLM）配合严密的 AST 映射范式与类型守卫，能够以极高的精度自动化完成从 Class 组件到 FC + Hooks 的优雅蜕变。

本文将手把手拆解这一重构全流程。

核心语法与生命周期映射对照表

[React Class Component 传统语法] ───> [React 18/19 FC + Hooks 现代标准范式] ----------------------------------------------------------------------------- 1. `class MyComp extends React.Component` ───> `export function MyComp(props: Props)` 2. `this.state = { count: 0 }` ───> `const [count, setCount] = useState(0);` 3. `this.setState({ count: 1 })` ───> `setCount(1);` 4. `this.myRef = React.createRef()` ───> `const myRef = useRef<HTMLDivElement>(null);` 5. `componentDidMount()` ───> `useEffect(() => { ... }, []);` 6. `componentWillUnmount()` ───> `useEffect(() => { return () => { ... }; }, []);` 7. `componentDidUpdate(prevProps)` ───> `useEffect(() => { ... }, [props.dep]);` 8. `getDerivedStateFromProps(props)` ───> 直接在渲染时使用纯函数派生计算！ 9. 消除所有 `this.props` 与 `this.state` ───> 直接访问解构后的变量！

生产级自动化重构 Prompt 约束模板

在驱动大模型进行批量转换时，使用以下严密的 System Prompt：

# Role: React 19 顶级重构架构师（FC + Hooks 纯函数专家） ## 重构目标 将以下使用 Class Component 编写的 React 组件，重构为现代 React 18/19 标准的函数组件（Functional Component + Hooks）。 ## 待重构 Class 源码： \`\`\`tsx {classComponentSourceCode} \`\`\` ## 严格重构黄金纪律（Strict Refactoring Rules） 1. 彻底根除 `this` 与 `bind`：在函数组件内部，彻底消除所有 `this.state`、`this.props`、`this.setState` 以及 constructor 内部的 `.bind(this)`！ 2. 状态原子化拆分（Atomic State Splitting）： - 将原 Class 中庞大的单个 `this.state = { a, b, c }` 拆分为多个独立的原子状态：`const [a, setA] = useState(...)`； 3. 副作用高内聚（Colocated Effects）： - 将原本分散在 `componentDidMount` 与 `componentWillUnmount` 中属于同一个数据源或事件监听的代码，合并进同一个带有 `return cleanup` 的 `useEffect` 中！ 4. 保持 JSX 结构与 CSS 类名 100% 严格一致：严禁随意修改 DOM 树结构； 5. TypeScript 严格类型声明：为函数入参显式声明完整的 `interface Props` 契约。

真实重构实录：从 100 行 Class 样板代码到极致精炼

1. 重构前的存量 Class 组件（OrderCountdown.tsx）：

import React from 'react'; interface Props { orderId: string; initialSeconds: number; onExpire: () => void; } interface State { secondsLeft: number; isPaused: boolean; } export class OrderCountdown extends React.Component<Props, State> { private timer: NodeJS.Timeout | null = null; constructor(props: Props) { super(props); this.state = { secondsLeft: props.initialSeconds, isPaused: false, }; this.togglePause = this.togglePause.bind(this); } componentDidMount() { this.startTimer(); } componentWillUnmount() { this.stopTimer(); } startTimer() { this.timer = setInterval(() => { if (!this.state.isPaused) { this.setState((prev) => { if (prev.secondsLeft <= 1) { this.stopTimer(); this.props.onExpire(); return { secondsLeft: 0 }; } return { secondsLeft: prev.secondsLeft - 1 }; }); } }, 1000); } stopTimer() { if (this.timer) { clearInterval(this.timer); this.timer = null; } } togglePause() { this.setState((prev) => ({ isPaused: !prev.isPaused })); } render() { return ( <div class="countdown-box"> <h4>订单支付倒计时: {this.state.secondsLeft} 秒</h4> <button onClick={this.togglePause}> {this.state.isPaused ? '继续' : '暂停'} </button> </div> ); } }

2. AI 自动重构后的现代 FC + Hooks 标准产物：

import React, { useState, useEffect } from 'react'; export interface OrderCountdownProps { orderId: string; initialSeconds: number; onExpire: () => void; } export function OrderCountdown({ initialSeconds, onExpire }: OrderCountdownProps) { // 1. 原子状态声明 const [secondsLeft, setSecondsLeft] = useState(initialSeconds); const [isPaused, setIsPaused] = useState(false); // 2. 高内聚的计时器副作用：订阅与清理合二为一！ useEffect(() => { if (isPaused || secondsLeft <= 0) return; const timer = setInterval(() => { setSecondsLeft((prev) => { if (prev <= 1) { clearInterval(timer); onExpire(); return 0; } return prev - 1; }); }, 1000); // 核心：自动清理定时器，零内存泄漏！ return () => { clearInterval(timer); }; }, [isPaused, secondsLeft, onExpire]); // 3. 纯净方法 const togglePause = () => { setIsPaused((prev) => !prev); }; return ( <div class="countdown-box"> <h4>订单支付倒计时: {secondsLeft} 秒</h4> <button type="button" onClick={togglePause}> {isPaused ? '继续' : '暂停'} </button> </div> ); }

自动化验证流水线（Zero-regression Verification）

重构产物必须通过三道严密测试：

[AI 生成 FC 组件源码] │ ▼ (1. TypeScript 严格编译校验) [运行 tsc --noEmit ── 验证类型收窄 0 错误] │ ▼ (2. React Testing Library 单元测试) [运行 pnpm vitest run tests/components/OrderCountdown.spec.tsx] ├── 断言倒计时秒数递减正常 ├── 断言点击暂停/继续按钮状态切换正确 └── 断言倒计时归零时 onExpire 回调被精准触发 1 次！ │ ▼ (3. 提交 Git Commit 并标记为自动化重构)

落地效益

• 代码量暴降 45%：彻底消灭了 Constructor、Bind 样板代码与分散的生命周期；
• 全面拥抱 React 19 并发体系：重构后的组件无缝兼容startTransition、Suspense 以及服务端流式渲染；
• 可测试性大幅提升：纯函数组件更容易在 Node.js / JSDOM 环境下完成毫秒级单测验证。