react中component存在性能问题
- Component存在的问题?
1). 父组件重新render(), 当前组件也会重新执行render(), 即使没有任何变化
2). 当前组件setState(), 重新执行render(), 即使state没有任何变化 - 解决Component存在的问题
1). 原因: 组件的componentShouldUpdate()默认返回true, 即使数据没有变化render()都会重新执行
2). 办法1: 重写shouldComponentUpdate(), 判断如果数据有变化返回true, 否则返回false
3). 办法2: 使用PureComponent代替Component
4). 说明: 一般都使用PureComponent来优化组件性能 - PureComponent的基本原理
1). 重写实现shouldComponentUpdate()
2). 对组件的新/旧state和props中的数据进行浅比较, 如果都没有变化, 返回false, 否则返回true
3). 一旦componentShouldUpdate()返回false不再执行用于更新的render() - 面试题:
组件的哪个生命周期勾子能实现组件优化?
PureComponent的原理?
区别Component与PureComponent?
react中component存在性能问题的更多相关文章
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- React中静态类型校验 - PropTypes
1.基本说明PropTypes定义为组件类自身的属性,用以定义prop的类型.在开发模式下,当提供一个不合法的值作为prop时,控制台会出现警告: 在产品模式下,为了性能考虑应忽略propTypes ...
- 【React】393 深入了解React 渲染原理及性能优化
如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...
随机推荐
- java 使用poi读取word文档存入数据库
使用的poi jar包需要自己下载 读取的word文档中含有多个图片,所以分为两个部分,一个部分读取各个表格中内容,一个是将所有图片截取出来: /** * 遍历段落内容 * docxReadPath ...
- Wuss Weapp 微信小程序 UI 组件库
微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...
- ES head
第2种安装方式 第二种方式就是不通过Elasticsearch插件方式进行安装 1.下载elasticsearch-head的源码包 地址:https://github.com/mobz/elasti ...
- 项目管理工具!DevExpress Winforms Gantt控件 v19.2强势来袭
DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...
- 一例jsonp跨域访问
对于网站A,有一链接 '/auth/list',返回json数据 {, , , , , },{, , , , , }]} 网站b某页面下可以这样写jsonp get请求 <script> ...
- hdu 5761 Rower Bo 微分方程
Rower Bo Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- HZOJ 20190727 随(倍增优化dp)
达哥T1 实际上还是挺难的,考试时只qj20pts,还qj失败 因为他专门给出了mod的范围,所以我们考虑把mod加入时间复杂度. $50\%$算法: 考虑最暴力的dp,设$f[i][j]$表示进行$ ...
- 7.9T2EASY(easy)
EASY(easy) sol:非常经典的题,取了一次之后,把线段树上这一段变成相反数 然后再贪心取和最大的. 重复以上操作,发现最后一定有对应的解,且根据贪心过程一定 是最大的 线段树上维护区间和最大 ...
- jsPDF – 基于 HTML5 的强大 PDF 生成工具
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档. 使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了. 米扑科技项目用到了HHTML5生成PD ...
- jQuery事件之绑定事件
语法: $(selector).bind(eventType[, eventData], handler(eventObject)); 参数解释: eventType(String): 一个包含一个或 ...