将React 类组件转换成 函数式组件

将React 类组件转换成 函数式组件

步骤：

1. 将class 类定义的React 元素转换成 变量或者函数
2. class 中的 render 函数 直接去掉，直接return html 元素
3. 将 state 变量使用 useState Hooks 替代
4. componentDidMount 生命周期使用 useEffect Hooks 替代
5. componentDidUpdate 生命周期使用 useEffect Hooks 替代
6. React memo 替代 PureComponent

区别：

性能上的差异较小，取决于代码是怎么写的；
class 和 闭包的区别；
函数思想还是面向对象思想；
需要做到逻辑清晰，低耦合，命名规范；
Hooks 会让代码结构更简单；
Hooks 在每次渲染或者更新都会创建一个函数执行上下文,可以使用 useCallback、useMemo；
Hooks 添加的原因，以及后续对 Hooks 的优化等可以看出 Hooks 肯定是有优于 class 的地方的；
函数组件中不能监听组件的生命周期，useEffect聚合了多个生命周期函数
class组件中生命周期较为复杂
class组件逻辑难以复用（HOC，render props）
函数组件业务代码更加聚合，比如在class 组件中定时器的创建和销毁分别在两个不同的生命周期，但 函数组件只需写在 useEffect 中即可。

性能对比：

差异较小，控制变量法。

备注：

1. 不必为componentDidMount()和componentDidUpdate()函数编写单独的代码。
2. 使用useEffect()Hook，可以获得两者的功能。useEffect()默认情况下在初始渲染之后和每次后续更新之后都会运行。可以使用Hooks 的版本，在 16.8.0开始
3. Hooks 没有状态（state) 和 生命周期函数单向数据流
4. useMemo和useCallback主要用于减少组件的更新次数、优化组件性能的。