将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(使用前将#替换为@)