Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

没有破坏性改动

Hook是：

  • 完全可选的，无需重写任何已有代码就可以在一些组件中尝试Hook
  • 100%向后兼容，Hook不包含任何破坏性改动
  • v16.8.0版本可用
  • 没有计划从React中移除class

动机

Hook 解决了我们编写和维护组件时遇到的各种各样看起来不相关的问题。

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

React没有提供将可用性行为“附加”到组件的途径（例如，把组件连接到store）。比如：Render Props 和 HOC高阶组件。
但是这类方案需要重新组织组件结构，这可能会很麻烦，使代码难以理解。案例：

复杂组件变得难以理解

我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
借用Vue3逻辑复用对比图：
image.png

难以理解的CLASS

除了代码复用和代码管理会遇到困难外，我们还发现 class 是学习 React 的一大屏障。你必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。即便在有经验的 React 开发者之间，对于函数组件与 class 组件的差异也存在分歧，甚至还要区分两种组件的使用场景。