首先我们对比一下函数式组件和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应用,最终你会发现一层一层的包裹形成最终的”嵌套地狱“;