附实例！图解React的生命周期及执行顺序
本文由云+社区发表
作者：前端林子
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可直接在浏览器里运行，大家可以通过控制台查看父组件、子组件中的各生命周期调用的顺序：
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app-container"></div>
<script type="text/babel">
var SubCounter = React.createClass({
componentWillReceiveProps:function() {
console.log('9、子组件将要接收到新属性');
},
shouldComponentUpdate:function(newProps, newState) {
console.log('10、子组件是否需要更新');
if (newProps.number < 5) return true;
return false
},
componentWillUpdate:function() {
console.log('11、子组件将要更新');
},
componentDidUpdate:function() {
console.log('13、子组件更新完成');
},
componentWillUnmount:function() {
console.log('14、子组件将卸载');
},
render:function() {
console.log('12、子组件挂载中');
return (
<p>{this.props.number}</p>
)
}
});
var Counter = React.createClass({
getInitialState:function(){
return(
this.state={
number:0
}
)
},
componentWillMount:function(){
console.log('3、父组件挂载之前');
},
componentDidMount:function(){
console.log('5、父组件挂载完成');
},
shouldComponentUpdate:function(newProps, newState) {
console.log('6、父组件是否需要更新');
if (newState.number<15) return true;
return false
},
componentWillUpdate:function() {
console.log('7、父组件将要更新');
},
componentDidUpdate:function() {
console.log('8、父组件更新完成');
},
handleClick : function(){
this.setState({
number: this.state.number + 1
})
},
render:function() {
console.log('4、render(父组件挂载)');
return (
<div>
<p>{this.state.number}</p>
<button onClick={this.handleClick}>+</button>
{this.state.number<10?<SubCounter number={this.state.number}/>:null}
</div>
)
}
});
ReactDOM.render(<Counter />, document.getElementById('app-container'));
</script>
</body>
</html>
点击一次按钮，通过控制台可以看到：
4.小结
本文主要是图文结合地介绍了react的生命周期及执行顺序，同时附上了一个实例，可以清楚地看到父组件、子组件的调用顺序。如存在问题，欢迎指正~~~
此文已由腾讯云+社区在各渠道发布
获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号
附实例！图解React的生命周期及执行顺序的更多相关文章
- Spring的Bean的生命周期方法执行顺序测试
通过一个简单的Maven工程来演示Spring的Bean生命周期函数的执行顺序. 下面是工程的目录结构: 直接贴代码: pom.xml文件内容: <?xml version="1.0& ...
- Unity脚本生命周期与执行顺序
文章目录 脚本生命周期 MonoBehavior生命周期图 脚本执行顺序 自定义执行顺序 在Unity中,脚本可以理解为附加在游戏对象上的用于定义游戏对象行为的指令代码.必须绑定在游戏对象上才能开始它 ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
- MonoBehaviour Lifecycle(生命周期/脚本执行顺序)
脚本执行顺序 前言 搭建一个示例来验证Unity脚本的执行顺序,大概测试以下部分: 物理方面(Physics) 渲染(Scene rendering) 输入事件(InputEvent) 流程图 Uni ...
- Unity3D脚本的生命周期（执行顺序）
Unity脚本中有许多固定的函数 例如Start();Update(); 而这些函数都有固定的执行顺序 搞清楚这些函数的执行顺序 对于我们理清代码的逻辑就显得尤为重要 举个简单的例子 //脚本A pu ...
- vue中的父组件及子组件生命周期的执行顺序
一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...
- 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序
首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...
- React组件生命周期-正确执行运行阶段的函数
一. 二. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- React组件生命周期-正确执行初始化阶段的函数
一. 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
随机推荐
- browser-sync + http-proxy-middleware 配置代理跨域
写代理js文件下面是文件内容 /** * Module dependencies. */ var browserSync = require('browser-sync').create() var ...
- 信息学奥赛辅导经验谈 & 问题教学法中的学生思维能力培养
转载来自朱全民名师工作室 信息学奥赛辅导经验谈 全国青少年信息学奥林匹克分区竞赛(简称NOI)是经中国科协.国家教育部批准,由中国计算机学会主办的一项全国性的青少年学科竞赛活动.随着信息学奥林匹克竞赛 ...
- CentOS7上安装Snipe-IT4.6.3详细过程及注意事项
笔者采用的是CentOS7,先对系统进行Update,然后安装军哥的LNMPA,详情请参考lnmp.org 注意:安装LNMPA前需要修改lnmp.conf中这一行为下面,也就是要安装PHP的File ...
- 学习使用Mendeley1
原文来自:https://www.mendeley.com/guides/desktop/01-desktop-interface 1.添加文件菜单 - 使用此功能将新条目添加到您的Mendeley库 ...
- layedit第三次改造
原文链接:http://www.bianbingdang.com/article_detail/105.html 作为技术人员,在网上写代码,常常涉及代码块的编写.一个好的代码块,让页面美化很多. 由 ...
- DOM-节点概念-属性
1.节点的概念 页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点. 2.节点相关的属性 2.1.节点分类 **标签节点:**比如 div 标签, ...
- idea注册码
2019 idea 注册码: N757JE0KCT-eyJsaWNlbnNlSWQiOiJONzU3SkUwS0NUIiwibGljZW5zZWVOYW1lIjoid3UgYW5qdW4iLC ...
- Ajax级联选择框
Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...
- 算法与数据结构(十) 二叉排序树的查找、插入与删除(Swift版)
在上一篇博客中,我们主要介绍了四种查找的方法,包括顺序查找.折半查找.插入查找以及Fibonacci查找.上面这几种查找方式都是基于线性表的查找方式,今天博客中我们来介绍一下基于二叉树结构的查找,也就 ...
- 1.9 From Native to HTML5
The mobile technology has become more and more mature, and it has evolved from a ridiculous situatio ...