首先我们对比一下函数式组件和hooks组件？
React16.8之前, 是有函数式组件（没有hooks）
函数式组件：
和Hooks组件相比，它组件本身是没有状态的，并且没有任何的副作用; 完全受控于父组件，后期如果业务调整，那函数式组件需要改成class组件，非常麻烦并且具有破坏性。
Hooks组件：
本身是有状态的，所以后期业务调整，也是可以在此基础上去修改。
接着说一下为什么要使用Hooks，之前的class组件是有哪些缺陷吗？
主要有以下两点原因：
1. 组件之间复用状态逻辑很难
- 组件期初很简单，但是随着业务的深入，会逐渐被一些状态逻辑和副作用充斥着，每一个生命周期常常包含一些不相关的逻辑，例如componentDidMonut里面需要请求数据，还需要设置一些事件监听，除此之外还包含其它的逻辑，这样会造成完全不相关的代码在同一个方法中执行，如果很容易产生bug；
- 在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在；
- 解决：为了解决这个问题， Hook将组件中相关关联的部分拆分成更小的函数（比如设置订阅、或请求数据），而非强制按照生命周期划分；
2. 复杂组件变得难以理解
- 举例：比如组件想使用一些公共的状态，比如redux.你可能需要通过render Props 和 高阶组件此类解决方案，但是这类方案改变组件结构，比如一些组件要使用redux状态管理工具，那势必要使用provider, connect高阶组件包裹，将store传递给目标组件，造成多层嵌套，增加复杂度，并且会造成ref阻断；
- 如果你使用React DevTools观察过react应用，最终你会发现一层一层的包裹形成最终的”嵌套地狱“；
参考1：React18 Hooks原理与源码解析讲解_哔哩哔哩_bilibili
参考2: [react] 高阶组件(HOC)有哪些优点和缺点？_普通网友的博客-CSDN博客_hoc的缺点