每当store里有数据更新时,render()函数就会执行,有时候store的更新数据与本组件并没有关系,render()不必执行。

  我们可以用shouldComponentUpdate来优化组件。

shouldComponentUpdate(nextProps,nextState){
if(nextState.Number == this.state.Number){
return false
}
}

  但是每个组件都用shouldComponentUpdate会比较麻烦,还可以用另一种方法:用PureComponent代替Component。

  PureComponent改变了生命周期方法shouldComponentUpdate,并且它会自动检查组件是否需要重新渲染。这时,只有PureComponent检测到state或者props发生变化时,PureComponent才会调用render方法,因此,我们不用手动写额外的检查。

  注意:用PureComponent要用imuutable.js管理数据,不然有坑。

React-性能优化pureComponent的更多相关文章

  1. React性能优化 PureComponent

    为什么使用? React15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin  ...

  2. React性能优化之PureComponent 和 memo使用分析

    前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...

  3. react性能优化

    前面的话 本文将详细介绍react性能优化 避免重复渲染 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM.当他们不相等时,R ...

  4. React性能优化记录(不定期更新)

    React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...

  5. 关于React性能优化

    这几天陆陆续续看了一些关于React性能优化的博客,大部分提到的都是React 15.3新加入的PureComponent ,通过使用这个类来减少React的重复渲染,从而提升页面的性能.使用过Rea ...

  6. React 性能优化 All In One

    React 性能优化 All In One Use CSS Variables instead of React Context https://epicreact.dev/css-variables ...

  7. react组件性能优化PureComponent

    首先我们使用react组件会配合connect来连接store获取state,那么只要store中的state发生改变组件就会重新渲染,所以性能不高,一般我们可以使用shouldComponentUp ...

  8. React性能优化总结(转)

    原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...

  9. react性能优化要点

    1.减少render方法的调用 1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较.)或在继承自Reac ...

  10. React性能优化总结

    本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的 ...

随机推荐

  1. maven 技巧

    M2Eclipse Releases maven eclipse插件最新安装地址 Full Version Tag 1.0 2011-06-22 http://download.eclipse.org ...

  2. Spring@Autowired注解与自动装配(转发)

    1   配置文件的方法 我们编写spring 框架的代码时候.一直遵循是这样一个规则:所有在spring中注入的bean 都建议定义成私有的域变量.并且要配套写上 get 和 set方法. Boss ...

  3. 说说Android6.0动态申请权限的那些坑

    白天在做SDK23版本的适配,遇到了不少坑,现在抽空记下来,以此为戒. 首先要知道哪些坑,就得先了解一些定义和基本使用方式. 那么先介绍一下动态申请的权限分组情况. 下面的权限组是由谷歌官方定义的,目 ...

  4. eclipse版本和jdk对应关系

    jdk最新版历史版本下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html http://www.oracle.co ...

  5. 使用sstream来进行类型转换

    在某种情况下,我们不得不进行整型等数据类型与字符串类型的转换,比如,将“1234”转换为整数,常规的我们可以使用atoi函数来进行转换,或者是写一个循环来做转换,我们在这里也可以使用sstream类来 ...

  6. Windows 下配置 Apache 支持 https

    1.打开cmd ,输入  F: // 切换到Apache安装路径,我的Apache安装目录在 F盘 2.cd F:\Apache\bin 3.set "openssl_conf = F:\A ...

  7. golang的一些基础数据类型转换

    int -- string //string到int value_int,err:=strconv.Atoi(string) //int到string str:=strconv.Itoa(value_ ...

  8. 修改CentOS 7.2系统的主机名

    之前使用网上的大部分说法,修改了两个配置文件: /etc/hosts /etc/sysconfig/network 然后,并没有什么卵用. 后来,搜阿里云配置,看到这个办法: 使用“经典网络”类型的E ...

  9. Excel中mod函数的使用方法

    1.mod函数的含义 1 1.mod函数是一个用来求余数函数,返回两数相除的余数.mod函数在Excel中一般不单独使用,经常和其他函数组合起来使用. END 2.mod函数的语法格式 1 2.mod ...

  10. MongoDB逻辑操作符$or, $and,$not,$nor

    $or是一个逻辑or操作符操作在一个数据或者多个表达式并且需要选择至少一个满足条件的表达式,$or有至少以下表达式: { $or: [ { <expression1> }, { <e ...