【Hooks系列1】React中为什么会有Hooks，它有什么用？

关注程序员耳东，编程转码真轻松

提供前端面试辅导服务、零基础前端自学辅导服务；免费修改前端简历，免费回答小问题

新开一个系列，聊聊React Hooks，希望这个系列可以写完，既是写给我自己的，也是写给你们的

什么是Hooks

先说什么是React Hooks，它是React 16.8版本中的一项新增特性，Hooks可以让你在函数式组件中使用状态（state）和其他一些Class组件的特性，比如说生命周期这种能力

上面这个说法太官方了，我尽量说的直白一些，Hooks其实就是在React16.8版本中提供了一堆方法，比如说useState、useEffect等等，它可以让你在函数式组件中使用来达到Class组件相同的效果，并且可以让代码更加短小精悍，还能避免一些Class组件存在的问题。也就是说，你以后写代码可以直接全写函数式组件，并且可以在组件里愉快的使用Hooks来实现状态、生命周期等等效果

为啥要用Hooks，它有什么用

既然上面说到了Class组件存在的问题，下面就说一下Class组件到底存在哪些问题，只有搞清楚了Class组件存在的问题，我们才能更好的明白为啥会有Hooks这个东西的出现

繁琐this的问题

写过Class组件的程序员都知道，在代码中会有很多的this，比如说this.state.id、this.props.data等等，这些也倒还好，要是碰到事件绑定，还得写个this.eventHandler.bind(this)，要是忘了绑定this可能还会出bug

但是你如果使用Hooks就不用考虑this的问题，比如下面这样写，因为整个组件就是一个函数，所以不用写那些重复的this

state相关的逻辑无法复用的问题

我们平时在Class组件中写代码的时候，使用state都会涉及到这几个步骤：

1. 在constructor中定义state
2. 在method中修改state
3. 在render中使用state
4. 在didMount生命周期中启用相关的逻辑

那如果其他组件内部也有类似的state和逻辑，我们应该如何复用呢？在Class组件中是做不到复用state逻辑的，只能复制粘贴了

举个具体的例子，比如说有一个倒计时的逻辑，如果是在Class组件里面，我们一般是下面这样实现的

可以看出来相关的逻辑散落在constructor、componentDidMount、render、startCounter方法里面，如何此时我在其他组件里面也想实现类似的逻辑，那这些代码我就很难复用了

但是在Hooks时代，我们可以把倒计时状态和它相关的逻辑一起抽成一个新的Hook来复用，代码如下：

这个代码复用程度就很高了，可以把count和它的更新逻辑封装为useCounter方法，它是个自定义Hook，跟使用React内置Hook一样，需要的时候直接引入即可，是不是相比Class组件时代更加方便和灵活？

复杂逻辑代码不好组织的问题

设想这样一个功能场景，我们需要实现聊天室功能，那么肯定是组件加载的时候连接到聊天室，组件销毁的时候中断连接，如果使用Class组件，代码的大致实现思路是这样的：

1. 在componentDidMount方法中使用connect方法建立连接
2. 在componentWillUnMount方法中使用disconnect方法中断连接

之前我觉得这么写没问题，现在越看越有问题，因为从逻辑上来讲，建立连接和中断连接这两个方法都是为同一件事情服务的，它们理应放在一起，这样可以更好管理和阅读代码；但是在Class组件中，它们被强行分散在不同的方法中，看起来就比较别扭

Hooks就可以解决这个问题，useEffect让你忘记componentDidMount和componentWillUnMount，直接把逻辑都写在useEffect里，具体代码如下：

上面这样写，connect和disconnect逻辑一目了然，也解决了复杂逻辑代码不好组织的问题

useContext

这个Hook比较特殊，它是之前Class组件不曾拥有的能力，它可以让你在组件内部读取并且订阅到context，这样就可以解决一些状态数据共享和管理的问题了，关于useContext的具体信息我后面的笔记再聊

总结

好了，这篇笔记就聊到这里，不懂的欢迎在评论区讨论