目录
前言
React Hooks 是在 React 16.8 版本中引入的一个非常强大的新特性，它允许在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种更直接的方式来使用 React 的特性和生命周期功能，让函数组件的能力大大增强。
有关state状态的详细解释可以在这篇文章找到解释，粗糙理解就是app的数据flutter向 一文就够了 以声明式编程的角度理清到处都用的“状态state”是什么-CSDN博客
Hooks的前世
既然说到hooks在16.8才引入，那之前是怎么处理代码的呢
React 16.8 引入 Hooks 之前，React 的组件主要通过两种方式编写：函数组件和类组件
函数组件
在 React 16.8 之前，函数组件被称为无状态组件，主要用于展示，不能使用状态（state）和生命周期方法。函数组件的主要优点是简洁易懂。它接收 props 作为输入，返回需要渲染的 JSX。
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }类组件
类组件允许使用更多的特性，如内部状态（state）和生命周期方法。通过这些特性，可以控制组件的创建、更新和销毁过程。
class Welcome extends Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
}
componentDidMount() {
// 组件挂载后执行
}
componentDidUpdate() {
// 组件更新后执行
}
componentWillUnmount() {
// 组件卸载前执行
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
状态和生命周期的管理
在 Hooks 出现之前，要在函数组件中使用状态和生命周期，开发者需要将其重构为类组件。这一点限制了函数组件的使用场景，也增加了组件代码的复杂性。
所以不难理解，这样会有如下麻烦
- 在组件之间复用状态逻辑很难： 在 Hooks 出现之前，复用状态逻辑需要高阶组件或渲染属性模式，这些模式使得代码难以理解。
- 复杂组件变得难以理解： 类组件经常需要理解 JavaScript 中的
this关键字，且代码往往分散在多个生命周期方法中。 - 难以理解的类： 对于初学者和非 JavaScript 背景的开发者来说，类是一个比较难以理解和使用的概念。
Hooks用途以及相应代码
状态管理
useState：这是最基本的 Hook，允许在函数组件中添加局部状态。状态通常是指组件中的数据，如用户输入、列表项等。
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
用于生命周期管理和副作用操作的 Hooks
useEffect：允许在函数组件中执行副作用操作（如数据获取、订阅或手动修改 DOM 等），它可以被看作是componentDidMount、componentDidUpdate和componentWillUnmount这些生命周期方法的组合。
function Example() {
const [count, setCount] = useState(0);
// 类似于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
用于上下文管理的 Hooks
useContext：允许在函数组件中访问 React 的 Context 特性，使得跨组件层级的数据传递变得简单。
function Example() {
const theme = useContext(ThemeContext);
return <div style={{ background: theme.background, color: theme.color }}>
我是使用了 ThemeContext 的文本
</div>;
}
其他用途的 Hooks
useReducer：为状态管理提供了更复杂的替代方案，类似于 Redux 中的 reducer，适用于组件有复杂状态逻辑时使用。useCallback：返回一个记忆化的回调函数，只有在一个依赖项改变时才会更新，适用于传递给子组件的回调优化。useMemo：返回一个记忆化的值，只有在依赖项改变时才重新计算，用于性能优化。useRef：返回一个可变的 ref 对象，其.current属性被初始化为传入的参数（initialValue），用于访问 DOM 节点或存储任何可变值。
更多hook查看react官网
