1.react性能消耗主要在diff算法过程,所以性能优化主要在于减少不必要的diff算法
1.1减少非批更新阶段(setTimeout,setInterval,promise回调)中setState的调用次数,如在回调的最后统一执行setState
补充: 非批更新阶段:setTimeout,setInterval,promise回调,原生dom通过addEventListener绑定的事件
在react生命周期,其他react自定义事件如onclick绑定事件中setstate是“异步”执行的。
1.2通过componentShouldUpdate减少不必要的更新(每次state或props更新都会触发组件render,而每次父组件render会触发其所有的子组件render)
1.3列表循环时设置唯一key值(最好不要用index)
2.懒加载
通过懒加载在第一次进入页面时减少不必要的模块加载,提高首次加载速度
2.1通过import()

2.2react.lazy()

本文探讨了React应用性能优化的关键点,包括减少非批更新阶段的setState调用,利用componentShouldUpdate避免不必要的渲染,以及在列表渲染时设置唯一key。此外,还介绍了懒加载技术,如使用import()和react.lazy()提升初次加载速度。
1127

被折叠的 条评论
为什么被折叠?



