一、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 (
<div>
<p>{this.state.count}</p>
<button onClick={this.add}> +1 </button>
</div>
);
}
}
2. Hooks 写法（函数式）
import React, { useState, useEffect } from 'react';
const Counter = () => {
// 声明状态
const [count, setCount] = useState(0);
// 生命周期 + 副作用 合一
useEffect(() => {
console.log('挂载/更新');
return () => console.log('销毁');
});
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};
四、核心区别（面试必记）
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、逻辑聚合、复用自由、代码更清爽
参考文章：
