脚本宝典收集整理的这篇文章主要介绍了JS每日一题:react的生命周期有哪些?有什么需要注意的地方?,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
20190304期
react的生命周期有哪些?有什么需要注意的地方?
react的生命周期
这里我们以react v16.3为准
先上一张图
从图中我们可以看出来react生命周期分为三个部分
- mounting 装载处理
- updation 更新处理
- ummounting 卸载处理
Mounting
Mounting 英译过来叫做装备,装配的意思,在react这里我们理解为应用加载的过程,react在这个阶段做了哪些事情我们列举一下
- constructor 主要做些初始化操作,如初始化state、绑定成员的this环境
- getDerivedStateFromPorps 渲染之前都会触发
- componentDidMount 渲染到页面中后触发,这时可以操作DOM
Updation
三种情况会触发组件更新
这三种情况在react中也会不同的处理,forceUpdate最直接,既然是强制的那么什么好说的,直接进入render函数, 当props发生改变时会进入 getDerivedStateFromPorps函数处理完后进入shouldComponentUpdate(划重点,待会要考)更新完后进入componentDidUpdate函数
有同学应该注意到了, 上面划了一个重点 shouldComponentUpdate, 这里我们解释一下, 这个也是react中一个可优化的点
shouldComponentUpdate 音译过来我们可以猜出来一点,这个函数是可以控制组件是否需要更新的
事实也正是如此
场景随意列举一个吧, 比如你有一个大列表,这时props里一个与其不相干的属性发生变化,
进入了你的updation流程,如果你不处理那么你的页面将会进行一次无意义的渲染,这不是我们想要看见的,如果你在shouldComponentUpdate中阻止了流程继续往下走,你就减少了页面的渲染次数,在react应用中用好shouldComponentUpdate这个是很重要的
Unmounting
react 为组件卸载也提供一个函数
- componentWillUnmount 在组件卸载前触发
另外还有一个图上没有提到的,却很实用的一个hook
- componentDIDCatch 当组件发生错误触发,使用场景很多对吧,调试,埋点上报都能用上
回顾老版本
在 16.3之前的生命周期可以大家更熟悉,这里就贴一下图不做累述了
关于JS每日一题
JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案
- 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
以上是脚本宝典为你收集整理的JS每日一题:react的生命周期有哪些?有什么需要注意的地方?全部内容,希望文章能够帮你解决JS每日一题:react的生命周期有哪些?有什么需要注意的地方?所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。