附实例！图解React的生命周期及执行顺序

cyrils 发布于2019-08-23 15:11 / 1690人阅读

摘要：为防止一些潜在的，该方法默认总是返回。如果你确定及改变后不需要渲染组件，那么也可以指定返回，需要注意的是，这样的结果会导致后面的都不会被调用。

本文由云+社区发表

作者：前端林子

1.七个可选的生命周期

可以结合下图来看：

(1) componentWillMount() 仅在render()方法前被调用一次，如果在该方法中调用了setState方法去改变组件的状态值，那么调用render()后，将会直接看到改变过了的状态值，并且不论状态值怎么改变，componentWillMount()都不会再被调用。

(2) componentDidMount() 仅在render()方法后被立即调用一次（客户端），相对于父组件而言，该方法在子组件中会先被调用。如果需要使用一些JaveScript框架或者类似于setInterval()这样的方法，建议在该方法内使用。

(3) ShouldComponentUpdate(object nextProps, object nextState) 在初始渲染调用render()方法时不会被调用，后面在接受到新的state或者props时，在render()方法前被调用。为防止一些潜在的bug，该方法默认总是返回true。如果你确定state及props改变后不需要渲染组件，那么也可以指定返回false，需要注意的是，这样的结果会导致后面的render()、componentWillUpdate()、componentDidUpdate()都不会被调用。

一般的，我们可以通过该函数来优化性能：

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组

(4) componentWillReceiveProps(object nextProps) 在初始渲染调用render()方法时不会被调用，当接收到一个新的props时，该方法被调用。我们都知道，如果改变一个状态的值，则会触发render()方法，所以可以在这个方法里调用setState()方法去改变一个状态的值，当该方法接收到新的props时，setState()就可以避免一次额外的render()了。在这个方法里，尤其需要注意一点，就是接收到新的props一定会触发render()方法，但是render()方法被触发不一定是因为接收到了新的props

(5) componentWillUpdate(object nextProps, object nextState) 在初始渲染调用render()方法时不会被调用，当接收到新的props及state时，在render()方法之前被调用。

不要在此方法再去更新props 或者 state

(6) componentDidUpdate(object prevProps, object prevState) 在初始渲染调用render()方法时不会被调用，当组件更新被刷新到DOM之后被立即调用。

可以在这里访问，并修改 DOM

(7) componentWillUnmount() 在组件从DOM上卸载前被调用，在这个方法里面，我们主要是完成一些清除操作，比如说清除掉一些过时了的定时器等。

2.执行顺序及次数

(1) getDefaultProps()，调用1次

(2) getInitialState()，调用1次

(3) componentWillMount()，调用1次

(4) render()，调用>=1次

(5) componentDidMount()：仅客户端，调用1次

(6) componentWillReceiveProps(object nextProps)，调用>=0次

(7) ShouldComponentUpdate(object nextProps, object nextState)，调用>=0次

(8) componentWillUpdate(object nextProps, object nextState)，调用>=0次

(9) render()，调用>=1次

(10) componentDidUpdate(object prevProps, object prevState)，调用>=0次

(11) componentWillUnmount()，调用1次

3.实例

我写了一个小demo可直接在浏览器里运行，大家可以通过控制台查看父组件、子组件中的各生命周期调用的顺序：

点击一次按钮，通过控制台可以看到：

4.小结

本文主要是图文结合地介绍了react的生命周期及执行顺序，同时附上了一个实例，可以清楚地看到父组件、子组件的调用顺序。如存在问题，欢迎指正~~~

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

GPU云服务器云服务器服务器生命周期及利旧线程的生命周期 bug的生命周期 activity的生命周期

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

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

【备战春招/秋招系列】美团面经总结基础篇（附详解答案）

摘要：不同于个人面经，这份面经具有普适性。我在前面的文章中也提到了应该怎么做自我介绍与项目介绍，详情可以查看这篇文章备战春招秋招系列初出茅庐的程序员该如何准备面试。是建立连接时使用的握手信号。它表示确认发来的数据已经接受无误。 showImg(https://segmentfault.com/img/remote/1460000016972448?w=921&h=532); 该文已加入开源文...

Leck1e 2019-08-16 13:39 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

spacewander 2019-08-21 17:42 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

xfee 2019-08-15 12:33 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

makeFoxPlay 2019-07-31 11:00 评论0 收藏0