React类组件重构为函数组件需将class语法、this.state、生命周期和this.props转为useState、useEffect和参数解构，本质是从“实例+状态+生命周期”转向“函数+Hook+声明式副作用”。
React 中将类组件重构为函数组件，核心是把 class 语法、this.state、生命周期方法和 this.props 转换为函数组件的 useState、useEffect 和参数解构。这不是简单改写，而是思维方式的转变：从“实例+状态+生命周期”转向“函数+Hook+声明式副作用”。
状态（state）转换：用 useState 替代 this.state
类组件中通过 constructor 或类字段初始化状态，函数组件统一用 useState 声明。
例如：
// 类组件
class Counter extends React.Component {
state = { count: 0 };
render() {
return <button onclick="{()"> this.setState({ count: this.state.count + 1 })}>
Count: {this.state.count}
</button>;
}
}
→ 改为：
// 函数组件
function Counter() {
const [count, setCount] = useState(0);
return <button onclick="{()"> setCount(c => c + 1)}>
Count: {count}
</button>;
}
- 初始值直接传入
useState，支持函数（惰性初始化） - 更新状态推荐使用函数式更新（如
setCount(c => c + 1)），避免闭包陷阱 - 多个状态可多次调用
useState，不必合并到一个对象里
生命周期转换：用 useEffect 替代 componentDidMount/componentDidUpdate/componentWillUnmount
useEffect 是统一的副作用处理 Hook，通过依赖数组控制执行时机。
- 仅在挂载时执行 →
useEffect(() => { ... }, []) - 在 props/state 变化时执行 →
useEffect(() => { ... }, [dep1, dep2]) - 需要清理（如取消订阅、清除定时器）→ 在 effect 函数中返回清理函数
例如类组件中的数据获取和清理：
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
// 类组件
componentDidMount() {
this.timer = setInterval(() => this.setState({ time: Date.now() }), 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
→ 改为：
// 函数组件
useEffect(() => {
const timer = setInterval(() => setTime(Date.now()), 1000);
return () => clearInterval(timer); // 清理函数
}, []);
Props 和事件处理：解构 + 箭头函数，无需 this
函数组件接收 props 作为参数，可直接解构；事件处理器定义在函数作用域内，天然绑定上下文，不用 .bind(this) 或 class 字段箭头函数。
- 类组件中：
onClick={this.handleClick.bind(this)}或handleClick = () => { ... } - 函数组件中：
const handleClick = () => { ... }; onClick={handleClick} - 常见模式：解构
{ id, name, onEdit }直接使用，更简洁清晰
Refs 和其他实例属性：用 useRef 替代 this.ref
类组件中常用 React.createRef() 或回调 ref 存储 DOM 引用或跨渲染周期的可变值。函数组件中统一用 useRef。
-
const inputRef = useRef(null)，然后<input ref="{inputRef}"> -
ref.current可读可写，类似this.inputRef - 也可用于保存非响应式值（如定时器 ID、上一次的 props），避免重复创建
不复杂但容易忽略的是：函数组件每次渲染都是全新函数，闭包会捕获当次渲染的 props 和 state。所以 useCallback 和 useMemo 在需要稳定引用或昂贵计算时才用，不是必须项。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
