react性能优化(持续更新)

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()
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值