hooks与class简单对比

一. 为啥要用Hook
1.Hook是React16.8的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。
2.class相比函数式组件的优势：

• class组件内部可以定义自己的state，用来保存组件自己内部的状态；函数式组件不可以，因为函数每次调用都会产生新的临时变量。
• class组件有自己的生命周期，可以在对应的生命周期中完成自己的逻辑；比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求。
• class组件可以在状态改变时只重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等；函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；
  在Hook之前，以上情况通常都用class。

3.Class组件存在的问题：

• 复杂组件变得难以理解： 最初编写class组件时，往往逻辑比较简单，但是业务增多，class组件就会越来越复杂；
  比如componentDidMount中，可能就会有大量逻辑代码，包括网络请求，一些事件的监听（还需要在componentWillUnmount中移除）；
  而对于这样的class实际上很难拆分，因为这些逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度。
• 难以理解的class： ES6中class相当于React的一个障碍；
  在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this； 虽然掌握this是必要，但是处理起来依然很麻烦
• 组件复用状态很难： 在之前为了一些状态的复用，我们需要通过高阶组件或render props；
  像redux中connect或者react-route中的withRouter，这些高阶组件设计的目的就是为了状态的复用。
  或者类似于Provider，Consumer来共享一些状态，但是多次使用Consumer时，就会有很多嵌套；

二. Hook优点

• 可以让我们在不编写class的情况下使用state以及其他的React特性；也可以延伸很多用法解决上述问题。

• Hook使用场景： Hook的出现基本可以替代class组件（除了个别场景）；
  若项目比较旧，并不需要直接将所有代码重构为Hooks，因为它完全向下兼容，可以渐进式地来使用；
  Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；