一、为什么要引入 hooks ？

1.在组件之间复用状态逻辑很难

也就是说，在组件之间，复用 state，比较麻烦。

没有 hooks 的时代，我们通常会采用 render prop 或高阶组件的方式，来共享 state。

这类方案比较麻烦，使我们的代码变的难以理解。

【附】

render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

也就是，给组件传递一个叫做 render 的 prop，这个 prop 是个函数，这个函数返回一个组件实例，用于渲染。当然，它也可以不叫 render，作为 prop 的名字，完全自定义即可。

【使用hooks】（自定义hooks）

你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

2.复杂组件变得难以理解

（1）componentDidMount 中可能包含多个拉取数据的逻辑。多种逻辑放在一起，代码量大了，会不好维护。

（2）在 componentDidMount 注册的订阅事件，需要在 componentWillUnmount 中清除。相关逻辑被拆分，影响维护。

【使用hooks】（useEffect）

useEffect hooks，在 componentDidMount、componentDidUpdate、componentWillUnmount 三种生命周期下，都会进入。

3.难以理解的 class

（1）this 的指向、必须在 constructor 里面为方法手动绑定 this

（2）class 不能很好的压缩，并且会使热重载出现不稳定的情况

【使用hooks】（用hooks代替class）

Hook 使你在非 class 的情况下可以使用更多的 React 特性。 

二、Hook 使用原则

1.只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

2.只能在 React 的函数组件 或 自定义Hook中调用 Hook。不要在其他 JavaScript 函数中调用。

三、自定义 Hook

用于在组件之间复用状态（state）逻辑。

【注】

Hook 是一种复用 状态逻辑 的方式，它不复用 state 本身。事实上 Hook 的每次 调用 都有一个完全独立的 state —— 因此你可以在单个组件中多次调用同一个自定义 Hook。

自定义 Hook 更像是一种约定而不是功能。如果函数的名字以 “use” 开头并调用其他 Hook，我们就说这是一个自定义 Hook。