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 ajax获取网站Alexa排名的代码
Dec 12 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
Vue使用axios出现options请求方法
May 30 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与SQL注入攻击[一]
2007/04/17 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
JS与框架页的操作代码
2010/01/17 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python选择排序算法实例总结
2015/07/01 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
理发店策划方案
2014/06/05 职场文书
2014年行政工作总结
2014/11/19 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Python爬取某拍短视频
2021/06/11 Python
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers