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的性能优化对项目的体验和可维护性都有很大的 ...
随机推荐
- mybatis 中between and用法
今天遇到一个问题,半天没看出来问题,特意记录一下 Dao ConfigEvaluation findConfigEvaluationByEvalpecent(BigDecimal evalPercen ...
- svn和ftp的不同应用场合
作者:朱金灿 来源:http://blog.csdn.net/clever101 本来二者不是同一类的东西,是不能比较.引发我思考的是部门一些同事错把svn工具作为一个文件共享工具.因此我在思考一个问 ...
- cmake:善用find_package()提高效率暨查找JNI支持
cmake提供了很多实用的cmake-modules,通过find_package()命令调用这些modules,用于写CMakeLists.txt脚本时方便的查找依赖的库或其他编译相关的信息,善用这 ...
- Android RecycleView 自定义Item的使用
自定义布局的RecycleView需要自己实现Adapter,ViewHolder和布局: 自定义Adapter继承RecycleView.Adapter,重写getItemCount(),onBin ...
- Android 将数据写入Execl格式导出U盘、发送邮件
创建Execl.写入Execl数据.导入U盘 public WriteExcel(Context mContext){ this.mContext = mContext; } // 创建excel表 ...
- Android事件总线(三)otto用法全解析
前言 otto 是 Square公司发布的一个发布-订阅模式框架,它基于Google Guava 项目中的event bus模块开发,针对Android平台做了优化和加强.虽然Square已经停止了对 ...
- JavaScript大杂烩10 - 理解DOM
操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...
- Spring 12 种 常用注解!
1.声明bean的注解 @Component 组件,没有明确的角色 @Service 在业务逻辑层使用(service层) @Repository 在数据访问层使用(dao层) @Controller ...
- Asp.net Mvc、webApi配置允许跨域
Web.config 下<system.webServer> 节点下配置 <httpProtocol> <customHeaders> <add name=& ...
- Beta冲刺(5/5)(麻瓜制造者)
今日已完成 邓弘立:完成了图书馆新功能 符天愉:完成管理员用户查询,删除商品/需求以及注销功能 江郑:进行后台管理员的web开发 刘双玉:修改了商品搜索中数据返回类型不对的错误,添加了图书馆查询接口 ...