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利用div背景,做一个竖线的效果。
Nov 22 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
让table变成exls的示例代码
Mar 24 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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中的类-什么叫类
2006/11/20 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
php服务器的系统详解
2019/10/12 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python爬取三国演义的实现方法
2016/09/12 Python
python监控键盘输入实例代码
2018/02/09 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python实现多进程的四种方式
2019/02/22 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python读写Excel表格的方法
2021/03/02 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
财政局长个人总结
2015/03/04 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
干部考核工作总结2015
2015/07/24 职场文书