React中的render何时执行过程


Posted in Javascript onApril 13, 2018

我们都知道Render在组件实例化和存在期时都会被执行。实例化在componentWillMount执行完成后就会被执行,这个没什么好说的。在这里我们主要分析存在期组件更新时的执行。

存在期的方法包含:

  1. - componentWillReceiveProps
  2. - shouldComponentUpdate
  3. - componentWillUpdate
  4. - render
  5. - componentDidUpdate

这些方法会在组件的状态或者属性发生发生变化时被执行,如果我们使用了Redux,那么就只有当属性发生变化时被执行。下面我们将从几个场景来分析属性的变化。

首先我们创建了HelloWorldComponent,代码如下所示:

import * as React from "react";
class HelloWorldComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillReceiveProps(nextProps) {
    console.log('hello world componentWillReceiveProps');
  }
  render() {
    console.log('hello world render');
    const { onClick, text } = this.props;
    return (
      <button onClick={onClick}>
        {text}
      </button>
    );
  }
}

HelloWorldComponent.propTypes = {
  onClick: React.PropTypes.func,
};

export default HelloWorldComponent;

AppComponent组件的代码如下:

class MyApp extends React.Component {
   constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    console.log('button click');
    this.props.addNumber();
  }

  render() {
    return (
      <HelloWorld onClick={this.onClick} text="test"></HelloWorld>
    )
  }
}

const mapStateToProps = (state) => {
  return { count: state.count }
};

const mapDispatchToProps = {
  addNumber
};

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

这里我们使用了Redux,但是代码就不贴出来了,其中addNumber方法会每次点击时将count加1。

这个时候当我们点击button时,你觉得子组HelloWorldComponent的render方法会被执行吗?

React中的render何时执行过程 

如图所示,当我们点击button时,子组件的render方法被执行了。可是从代码来看,组件绑定的onClick和text都没有发生改变啊,为何组件会更新呢?

如果在子组件的componentWillReceiveProps添加这个log:console.log(‘isEqual', nextProps === this.props); 输出会是true还是false呢?

React中的render何时执行过程 

是的,你没有看错,输出的是false。这也是为什么子组件会更新了,因为属性值发生了变化,并不是说我们绑定在组件上的属性值。每次点击button时会触发state发生变化,进而整个组件重新render了,但这并不是我们想要的,因为这不必要的渲染会极其影响我们应用的性能。

在react中除了继承Component创建组件之外,还有个PureComponent。通过该组件就可以避免这种情况。下面我们对代码做点修改再来看效果。修改如下:

class HelloWorldComponent extends React.PureComponent

这次在点击button时发生了什么呢?

React中的render何时执行过程

虽然componentWillReceiveProps依然会执行,但是这次组件没有重新render。

所以,我们对于无状态组件,我们应该尽量使用PureComponent,需要注意的是PureComponent只关注属性值,也就意味着对象和数组发生了变化是不会触发render的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
全站最详细的Vuex教程
Apr 13 #Javascript
vue的常用组件操作方法应用分析
Apr 13 #Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
You might like
PHP STRING 陷阱原理说明
2010/07/24 PHP
php mail to 配置详解
2014/01/16 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python实现数独算法实例
2015/06/09 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
公务员总结性个人自我评价
2013/12/05 职场文书
cf战队收人口号
2014/06/21 职场文书
政工例会汇报材料
2014/08/26 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
防溺水主题班会教案
2015/08/12 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python