前言

对于Hook的定义官网文档是这么说的：
Hook 是 React 16.8 的新增个性。它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性。

简略来说，就是可能通过function组件+hooks来实现class组件的工作。所以咱们未免要拿class和hooks进行比照。

function组件每次渲染都会有独立props/state,而class组件总是会通过this拿到最新的props/state

class组件实例化一次，应用到的props/state都是通过this去获取，而this是可变的(mutable),所以在生命周期中所拿到的都是最新的props/state。

function组件每次渲染都会执行一次，每次渲染都有这次渲染所对应的独立的props/state。

所以在一些非凡状况下，class组件就会有谬误的体现，比方点击一个延时输入状态的按钮，在延时输入后果之前去更改状态，最终后果总是最新批改的状态，而不是点击延时按钮时的状态。就像Dan的文章函数式组件与类组件有何不同？中所举的例子。

function组件逻辑聚合，而class组件逻辑扩散

下面一点提到的两者的异同点并没有波及到hooks，只是单纯的function组件和class组件之间的区别，而当初要比照退出了hook之后的function组件。

class组件中的生命周期绝大部分的工作是在不同的时刻去解决一些副作用，而function也须要一种机制去解决组件交互过程中的副作用，这就是useEffect。

class组件中可能会将同一个性能的逻辑拆分到不同的生命周期中，比方会在componentWillUnMount中去卸载定时器

再比方在每次传入的props发生变化时去执行副作用就须要在componentDidMount和componentDidUpdate两个生命周期中去写对应的逻辑

而在function组件中，下面同样的逻辑应用useEffect去解决副作用就会使得逻辑非常聚合，不会将同一模块的逻辑散落到不同的中央。

function组件逻辑复用简略，而class组件逻辑复用艰难

在class组件中，逻辑复用的计划包含HOC和render props,然而这类计划都是将逻辑封装到一个形象层的组件中，在应用多个复用逻辑时会造成形象层组件的“嵌套天堂”。

例如一个组件须要复用鼠标地位逻辑和window size 变动的逻辑，让咱们来比照下HOC、render props和hooks之间的逻辑复用

1. render props


React DevTools 中对应的组件

2. HOC


React DevTools 中对应的组件

3. hooks


React DevTools 中对应的组件

能够看出HOC和render props都会扭转原先的组件构造，而hook能够使你在无需批改组件构造的状况下复用状态逻辑，并且在一个组件应用多个复用逻辑的状况下，hooks清晰简洁的逻辑提取和应用形式更能体现出劣势。

参考地址:

  1. https://www.zhihu.com/questio...
  2. https://zh-hans.reactjs.org/d...