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 相关文章推荐
JS获取页面窗口大小的代码解读
Dec 01 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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页面间传递参数实例代码
2008/06/05 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php之可变函数的实例详解
2017/09/13 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
详解Django配置优化方法
2019/11/18 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
法制宣传月活动方案
2014/05/11 职场文书
公司离职证明范本
2014/10/17 职场文书
学生检讨书范文
2014/10/30 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis