React-性能优化pureComponent
每当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的更多相关文章
- React性能优化 PureComponent
为什么使用? React15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin ...
- React性能优化之PureComponent 和 memo使用分析
前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...
- react性能优化
前面的话 本文将详细介绍react性能优化 避免重复渲染 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM.当他们不相等时,R ...
- React性能优化记录(不定期更新)
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...
- 关于React性能优化
这几天陆陆续续看了一些关于React性能优化的博客,大部分提到的都是React 15.3新加入的PureComponent ,通过使用这个类来减少React的重复渲染,从而提升页面的性能.使用过Rea ...
- React 性能优化 All In One
React 性能优化 All In One Use CSS Variables instead of React Context https://epicreact.dev/css-variables ...
- react组件性能优化PureComponent
首先我们使用react组件会配合connect来连接store获取state,那么只要store中的state发生改变组件就会重新渲染,所以性能不高,一般我们可以使用shouldComponentUp ...
- React性能优化总结(转)
原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...
- react性能优化要点
1.减少render方法的调用 1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较.)或在继承自Reac ...
- React性能优化总结
本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的 ...
随机推荐
- [VUE ERROR] Duplicate keys detected: 'tab-user'. This may cause an update error.
错误消息如图: 如果你看到此错误消息,则说明 v-for 指令的 key值 重复了,只需修改你的 key值 让其不会重复即可.
- tab 页形式展现多张报表
业务系统中,很多报表都是沿用之前 EXCEL 的报表样式,原来以 sheet 格式显示的表,客户在 web 端展现的时候也希望也有同样的格式,润乾在实现这种效果和 EXCEL 一样简单灵活,轻松将数据 ...
- scala spark 机器学习初探
Transformer: 是一个抽象类包含特征转换器, 和最终的学习模型, 需要实现transformer方法 通常transformer为一个RDD增加若干列, 最终转化成另一个RDD, 1. 特征 ...
- Echarts地图展示及属性分析
Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html 之前带本科实习时有同学用过,狗哥的博客也用这 ...
- momentjs 学习
momentjs 是一个JavaScript日期处理类库,官网地址:http://momentjs.com/ 字符串 + 格式 moment(String, String); moment(Strin ...
- tkinter学习系列(二)之窗口的设置
目录 (一)窗体的最小框架 1.说明: 2.源代码: 3.实现效果: (二)窗体的基本设置 1.说明: 2.完整代码: 3.实现效果: (三)窗体的外形设置 1.说明: 2.完整代码: 3.实现效果: ...
- Hadoop2.7.6_03_HDFS原理
1. HDFS前言 l 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: l 在大数据系统中作用: 为各类分布式运算框架(如:m ...
- January 25th, 2018 Week 04th Thursday
What made something precious? Losing it and finding it. 一件东西怎样才会变得珍贵无比?先弄丢了它,然后又找到了. A short time ag ...
- Bash On Windows上安装JDK
1. 引言 由于实习生转正,公司给配了一台新电脑,配置不用多说,16G内存,i7-7700的CPU,128SSD的系统盘,1T的机械硬盘,虽然只有一个破核显.对于我个人而言,最重要的是系统从Windo ...
- java 封装及this 用法
封装:主要用于将类中的成员名(类变量)通过 private关键字进行访问权限的设定,使用 private后,成员变量只能在当前类中进行访问,超过该类时访问提示不存在,当然也可以用于方法中,但较少.如果 ...