一、React Hooks 到底有什么用？
Hooks 让你在「函数组件」里，也能使用 React 的核心功能（state、生命周期、副作用、共享逻辑）。
在 Hooks 出现之前：
函数组件 = 只能渲染 UI，不能存状态、不能写生命周期
想写复杂逻辑 → 必须用类组件（Class）
Hooks 解决的就是：让函数组件也能写完整的业务逻辑，替代类组件。
最常用的 4 个 Hooks
useState → 给函数组件加状态（state）
useEffect → 处理副作用（请求接口、定时器、DOM 操作）
useContext → 方便拿跨组件共享数据
useRef → 拿 DOM 元素 / 存不渲染的数据
二、为什么要用 Hooks？（核心优势）
1. 代码更简洁、更易读
Class 写法要写 constructor、this、bind，代码臃肿。Hooks 直接一行声明状态，逻辑更直观。
2. 告别烦人的 this
Class 组件最大的坑就是 this 指向问题，Hooks 完全不用 this。
3. 逻辑可以复用（优点）
以前复用逻辑只能用：
高阶组件 HOC
Render Props会导致组件嵌套地狱。
Hooks 可以把独立逻辑抽成自定义 Hook，像函数一样复用，无嵌套、干净。
4. 逻辑聚合，更好维护
Class 里：一个业务逻辑会拆在 componentDidMount、componentDidUpdate、componentWillUnmount 里。Hooks：一个业务逻辑写在一起，可读性爆炸提升。
5. 更好的编译优化
函数组件比类组件更容易被 React 编译优化。
三、Hooks 写法 vs 传统面向对象（Class）写法
同功能对比，一眼看出区别。
需求：一个计数器
1. 传统 Class 写法（面向对象）
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 }; // 声明状态
}
componentDidMount() {
console.log('挂载');
}
componentDidUpdate() {
console.log('更新');
}
componentWillUnmount() {
console.log('销毁');
}
add = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
{this.state.count}
);
}
}
2. Hooks 写法（函数式）
import React, { useState, useEffect } from 'react';
const Counter = () => {
// 声明状态
const [count, setCount] = useState(0);
// 生命周期 + 副作用 合一
useEffect(() => {
console.log('挂载/更新');
return () => console.log('销毁');
});
return (
{count}
);
};
四、核心区别（面试必记）
1. 编程范式不同
Class：面向对象编程（OOP）
继承、实例、this、生命周期方法
Hooks：函数式编程（FP）
纯函数、无状态、组合式、无 this
2. 状态管理方式不同
Class：this.state + this.setState()
Hooks：useState 直接返回状态和修改函数
3. 生命周期 vs 副作用
Class：生命周期函数（固定名字）
Hooks：useEffect 统一管理（更灵活）
4. 逻辑复用
Class：HOC / Render Props（嵌套地狱）
Hooks：自定义 Hooks（干净、自由、无嵌套）
5. 代码体积 & 可读性
Class：代码冗余、this 易出错
Hooks：精简、直观、易维护
6. 组件设计思想
Class：以类实例为核心
Hooks：以逻辑函数为核心
五、总之（面试记这个就够）
Hooks 作用：让函数组件拥有 state、生命周期、副作用。
为什么用：代码简洁、无 this、逻辑易复用、易维护。
与 Class 区别：
Class：面向对象、有 this、生命周期分散、复用麻烦
Hooks：函数式、无 this、逻辑聚合、复用自由、代码更清爽
参考文章：
# 10分钟了解react引入的hooks
# 【Hooks系列1】React中为什么会有Hooks，它有什么用？
# 一文彻底搞懂react hooks的原理和实现
# 浅谈：为啥vue和react都选择了Hooks🏂？