React16生命周期误用及改正

React16.3采用异步更新机制,在页面组件并不复杂的情况下,我们在屏幕外似乎捕捉到的区别并不明显,其实框架内部已经发生重大变革,配套新的更新机制,组件的生命周期有所调整,废弃了三个旧生命周期,同时React官方也对新生命周期的使用做出了指导。下面列举就我自己项目开发中总结的生命周期中最常见的不当操作以及正确姿势:

  1. 在componentDidUpdate中setState导致组件无限被更新,影响组件的流畅度。
  2. 在getDerivedStateFromProps中获取dom属性比如scrollHeight,由于异步更新的缘故,获得的属性值可能并非当前更新对应的值,如果页面resize中断当次render,并改变了scrollHeight,重新回到render阶段可能得到脏数据,引起一些看似莫名其妙的错误。
  3. 在getDerivedStateFromProps中发起数据请求如ajax等,该请求也可能被重复发起多次,导致排队,挤占其它请求的次序,影响页面性能,这也是拜异步更新所赐。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值