阅读 175

React 组件的性能优化

1、组件卸载前进行把定时器清理工作

2、通过memo 保证子组件数据没有更新的情况下,不随着父组件的状态更新。可以传入第二个参数,自定义比较逻辑。

3、使用组件懒加载,减少bundle 体积大小,优化首屏加载速度。

路由懒加载: image.png

条件组件懒加载:

image.png

4、使用Fragment 占位符标记,简写成空标记也可以。

5、不要使用内联函数定义 在使用内联函数后,render 方法每次运行都会创建该函数的实例,导致在React在进行Virtual DOM 对比时,新旧函数对比不相等,然后重新为元素绑定新的实例,又将旧的函数实例交给垃圾回收机制。 正确的做法:在组件内单独好定义函数,再绑定到元素的事件上。

6、避免使用内联样式属性

image.png

7、优化条件渲染,减少组件卸载和挂载的次数

8、为组件建立错误边界

image.png

9、依赖优化

image.png

文章分类
前端
文章标签