React16.3采用异步更新机制,在页面组件并不复杂的情况下,我们在屏幕外似乎捕捉到的区别并不明显,其实框架内部已经发生重大变革,配套新的更新机制,组件的生命周期有所调整,废弃了三个旧生命周期,同时React官方也对新生命周期的使用做出了指导。下面列举就我自己项目开发中总结的生命周期中最常见的不当操作以及正确姿势:
- 在componentDidUpdate中setState导致组件无限被更新,影响组件的流畅度。
- 在getDerivedStateFromProps中获取dom属性比如scrollHeight,由于异步更新的缘故,获得的属性值可能并非当前更新对应的值,如果页面resize中断当次render,并改变了scrollHeight,重新回到render阶段可能得到脏数据,引起一些看似莫名其妙的错误。
- 在getDerivedStateFromProps中发起数据请求如ajax等,该请求也可能被重复发起多次,导致排队,挤占其它请求的次序,影响页面性能,这也是拜异步更新所赐。