将React 类组件转换成 函数式组件
步骤：
- 将class 类定义的React 元素转换成 变量或者函数
- class 中的 render 函数 直接去掉，直接return html 元素
- 将 state 变量使用 useState Hooks 替代
- componentDidMount 生命周期使用 useEffect Hooks 替代
- componentDidUpdate 生命周期使用 useEffect Hooks 替代
- React memo 替代 PureComponent
区别：
性能上的差异较小，取决于代码是怎么写的；
class 和 闭包的区别；
函数思想还是面向对象思想；
需要做到逻辑清晰，低耦合，命名规范；
Hooks 会让代码结构更简单；
Hooks 在每次渲染或者更新都会创建一个函数执行上下文,可以使用 useCallback、useMemo；
Hooks 添加的原因，以及后续对 Hooks 的优化等可以看出 Hooks 肯定是有优于 class 的地方的；
函数组件中不能监听组件的生命周期，useEffect聚合了多个生命周期函数
class组件中生命周期较为复杂
class组件逻辑难以复用（HOC，render props）
函数组件业务代码更加聚合，比如在class 组件中定时器的创建和销毁分别在两个不同的生命周期，但 函数组件只需写在 useEffect 中即可。
性能对比：
差异较小，控制变量法。
备注：
- 不必为componentDidMount()和componentDidUpdate()函数编写单独的代码。
- 使用useEffect()Hook，可以获得两者的功能。useEffect()默认情况下在初始渲染之后和每次后续更新之后都会运行。可以使用Hooks 的版本，在 16.8.0开始
- Hooks 没有状态（state) 和 生命周期函数单向数据流
- useMemo和useCallback主要用于减少组件的更新次数、优化组件性能的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
