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实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 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实现的下载远程文件类定义与用法示例
2017/07/05 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
js实现橱窗展示效果
2020/01/11 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
python脚本监控docker容器
2016/04/27 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
手把手教你python实现SVM算法
2017/12/27 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
商务英语专业自荐信
2013/10/14 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2014年安全员工作总结
2014/11/13 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
解决 redis 无法远程连接
2022/05/15 Redis
JS实现简单的九宫格抽奖
2022/06/28 Javascript
tree shaking对打包体积优化及作用
2022/07/07 Java/Android