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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
详解Angular5 服务端渲染实战
Jan 04 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JavaScript实现简单随机点名器
Nov 21 Javascript
详解Vue之事件处理
Jul 10 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顺序查找和二分查找示例
2014/03/27 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python列表生成器的循环技巧分享
2015/03/06 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python 多维List创建的问题小结
2019/01/18 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
详解python 爬取12306验证码
2019/05/10 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
瀑布模型都有哪些优缺点
2014/06/23 面试题
跟单文员岗位职责
2014/01/03 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
JS实现简单九宫格抽奖
2022/06/28 Javascript