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 相关文章推荐
javascript写的一个链表实现代码
Oct 25 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
js Dom实现换肤效果
Oct 21 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP中echo和print的区别
2014/08/28 PHP
php实现搜索类封装示例
2016/03/31 PHP
php可变长参数处理函数详解
2017/02/22 PHP
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
python中黄金分割法实现方法
2015/05/06 Python
python实现折半查找和归并排序算法
2017/04/14 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
详解python中的json和字典dict
2018/06/22 Python
一看就懂得Python的math模块
2018/10/21 Python
Python绘制热力图示例
2019/09/27 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
水务局局长岗位职责
2013/11/28 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
客服专员岗位职责
2014/02/28 职场文书
企业法人代表任命书
2014/06/06 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis