使用React Hook提高代码复用性

Hook 简介

Hook 是 React 16.8 的新增特性。是对 React 函数组件的一种扩展，通过提供一些特殊的函数，让无状态的组件拥有状态组件才拥有的能力。

没有Hook之前写组件有两种形式，分别为

• 函数组件
• class组件

函数组件特点如下

1. 所有的数据都是依赖props传入的，没有内部state
2. 没有生命周期
3. 没有this(组件实例)

实际开发中因为业务复杂，一般使用函数组件无法满足，所以大家默认都是使用class组件进行开发，这是一个不会出错的选择。函数组件大家平时应该都挺少会去用的，因为函数组件能提供的功能比较局限。但是引入Hook后，函数的能力就被扩展了许多，因为函数的特性，非常适合抽象成可复用的组件。

解决哪些问题

不同组件间与状态有关的逻辑复用问题

平时写组件的方式就是通过props传递给下一个组件，有些简单的情况这样也挺好的。但是当项目不断迭代，会发现当组件被多个模块多次引用，还是会多写一些重复的逻辑。因为受到到状态或者生命周期的影响，导致这部分逻辑却又很难拆出来。

引入Hook就可以将受状态或生命周期影响的组件抽出来。

业务发展导致组件日益庞大

最外层的代码集中维护许多state状态，导致页面引入越来越多毫无关联的模块，代码的可读性大大降低，有时候因为多个生命周期里面有大量不相关的逻辑，这样杂乱的代码容易引起bug，也增加了其它开发人员维护的难度。

Hook将组件中每一个相关的小模块拆分成一个函数，这样能够让组件即使庞大结构也是清晰的。

用法

• State Hook： 在函数组件中使用state
• Effect Hook： 在函数组件中使用生命周期
• Custom Hook： 自定义Hook，可以将组件逻辑提取到函数中。(注意：自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook)

Hook