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 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
全站最详细的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遍历二维数组的代码
2011/04/22 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
js string 转 int 注意的问题小结
2013/08/15 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
Position属性之relative用法
2015/12/14 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python实现的弹球小游戏示例
2017/08/01 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
Java基础知识面试要点
2016/07/29 面试题
管道维修工岗位职责
2013/12/27 职场文书
怎么写自荐书范文
2014/02/12 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
授权委托书怎么写
2014/04/03 职场文书
授权委托书格式模板
2014/04/03 职场文书
禁止酒驾标语
2014/06/25 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
小学教师个人总结
2015/02/05 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers