Function组件(Hooks) vs Class组件

前言

关于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去处理副作用就会使得逻辑十分聚合，不会将同一模块的逻辑散落到不同的地方。