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中去卸载定时器
Function组件(Hooks) vs Class组件_第1张图片

Function组件(Hooks) vs Class组件_第2张图片

function组件逻辑复用简单,而class组件逻辑复用困难

在class组件中,逻辑复用的方案包括HOCrender props,但是这类方案都是将逻辑封装到一个抽象层的组件中,在使用多个复用逻辑时会形成抽象层组件的“嵌套地狱”。

例如一个组件需要复用鼠标位置逻辑和window size 变化的逻辑,让我们来对比下HOC、render props和hooks之间的逻辑复用

1. render props

Function组件(Hooks) vs Class组件_第3张图片

2. HOC

3. hooks

Function组件(Hooks) vs Class组件_第4张图片

可以看出HOC和render props都会改变原先的组件结构,而hook可以使你在无需修改组件结构的情况下复用状态逻辑,并且在一个组件使用多个复用逻辑的情况下,hooks清晰简洁的逻辑提取和使用方式更能体现出优势。

参考地址:

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

你可能感兴趣的