JS每日一题：react的生命周期有哪些？有什么需要注意的地方?

seanHai 发布于2019-08-23 15:40 / 2427人阅读

摘要：期的生命周期有哪些有什么需要注意的地方生命周期是什么这里不再累述了，有兴趣可以点这里的生命周期这里我们以为准先上一张图从图中我们可以看出来生命周期分为三个部分装载处理更新处理卸载处理英译过来叫做装备，装配的意思，在这里我们理解为应用加载的过

20190304期

react的生命周期有哪些？有什么需要注意的地方?

生命周期是什么这里不再累述了，有兴趣可以点这里

react的生命周期

这里我们以react v16.3为准

先上一张图

从图中我们可以看出来react生命周期分为三个部分

mounting 装载处理

updation 更新处理

ummounting 卸载处理

Mounting

Mounting 英译过来叫做装备，装配的意思，在react这里我们理解为应用加载的过程，react在这个阶段做了哪些事情我们列举一下

constructor 主要做些初始化操作，如初始化state、绑定成员的this环境

getDerivedStateFromPorps 渲染之前都会触发

componentDidMount 渲染到页面中后触发,这时可以操作ＤＯＭ

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点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器私有云小程序开发有什么注意的不需要实名吗的云服务器有哪些线程的生命周期 js中的基本数据类型有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102409.html

JS每日一题：react中类组件和函数式组件中有什么不同?

摘要：期中类组件和函数式组件中有什么不同在中创建组件的形式有三种纯函数式定义的无状态组件定义的组件定义的组件今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同分别在什么场景下适合使用首先我们来看一下用上述方法如何来创建一个组件定义的 20190306期 react中类组件和函数式组件中有什么不同? 在react中创建组件的形式有三种纯函数式定义的无状态组件 React.cr...

Java_oldboy 2019-08-26 13:32 评论0 收藏0
JS每日一题：Vue-router有哪些钩子？使用场景？

摘要：问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在什么什么之前什么什么之后英文叫专业点叫生命周期，装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解，全 20190218问 Vue-router有哪些钩子？使用场景？ router的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在...

张金宝 2019-08-23 15:18 评论0 收藏0
JS每日一题:Webpack有哪些常见的Plugin？他们是解决什么问题的

摘要：期有哪些常见的他们是解决什么问题的定义音译过来就是插件在中插件目的在于解决无法实现的其他事插件是一个具有属性的对象。 20190327期 Webpack有哪些常见的Plugin？他们是解决什么问题的定义: 音译过来就是插件, 在webpack中, 插件目的在于解决 loader 无法实现的其他事 webpack 插件是一个具有 apply 属性的 JavaScript 对象。appl...

songze 2019-08-23 16:31 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
JS每日一题: Vue中mixin怎么理解？

摘要：两个对象键名冲突时，取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象，将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解？ mixin是为了让可复用的功能灵活的混入到当前组件中，混合的对象可以包含任意组件选项（生命周期，指令之类等等）, mixin翻译过来叫混合,高级的...

jubincn 2019-08-23 15:28 评论0 收藏0