关于react-hooks: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 去解决副作用就会使得逻辑非常聚合，不会将同一模块的逻辑散落到不同的中央。

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…