首页 > web前端 > js教程 > 正文

操作render执行有哪些方法

php中世界最好的语言
发布: 2018-04-28 13:36:06
原创
2568人浏览过

这次给大家带来操作render执行有哪些方法,操作render执行的注意事项有哪些,下面就是实战案例,一起来看一下。

我们都知道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方法会被执行吗?

 

如图所示,当我们点击button时,子组件的render方法被执行了。可是从代码来看,组件绑定的onClick和text都没有发生改变啊,为何组件会更新呢?

如果在子组件的componentWillReceiveProps添加这个log:console.log(‘isEqual', nextProps === this.props); 输出会是true还是false呢?

 

是的,你没有看错,输出的是false。这也是为什么子组件会更新了,因为属性值发生了变化,并不是说我们绑定在组件上的属性值。每次点击button时会触发state发生变化,进而整个组件重新render了,但这并不是我们想要的,因为这不必要的渲染会极其影响我们应用的性能。

在react中除了继承Component创建组件之外,还有个PureComponent。通过该组件就可以避免这种情况。下面我们对代码做点修改再来看效果。修改如下:

class HelloWorldComponent extends React.PureComponent
登录后复制

这次在点击button时发生了什么呢?


  

虽然componentWillReceiveProps依然会执行,但是这次组件没有重新render。

所以,我们对于无状态组件,我们应该尽量使用PureComponent,需要注意的是PureComponent只关注属性值,也就意味着对象数组发生了变化是不会触发render的。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

右侧带索引通讯录实现(附代码)

vue-ssr静态网站生成器VuePress使用详解

以上就是操作render执行有哪些方法的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号