20190304 期
react 的生命周期有哪些？有什么需要注意的地方?
生命周期是什么这里不再累述了，有兴趣可以点这里
react 的生命周期
这里我们以 react v16.3 为准
先上一张图
从图中我们可以看出来 react 生命周期分为三个部分
mounting 装载处理
updation 更新处理
ummounting 卸载处理
Mounting
Mounting 英译过来叫做装备，装配的意思，在 react 这里我们理解为应用加载的过程，react 在这个阶段做了哪些事情我们列举一下
constructor 主要做些初始化操作，如初始化 state、绑定成员的 this 环境
getDerivedStateFromPorps 渲染之前都会触发
componentDidMount 渲染到页面中后触发, 这时可以操作DOM
Updation
三种情况会触发组件更新
props 被改变
主动调用 setState 状态改变
forceUpdate 强制重新 render
这三种情况在 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 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题