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是一个专注 ...
随机推荐
- NTP服务及时间同步
环境: centos7 server 192.168.2.171 client 192.168.2.173.192.168.2.174 整体思路:173.174同步171的时间,171定时同 ...
- keil中使用Astyle格式化你的代码的方法-keil4 keil5通用
简介:在给RTT 提交代码,需要符合RT-Thread 的代码规范,本文简单介绍如何使用Astyle 格式化为符合RTT要求的代码风格. 关于Astyle Astyle 的全称是Artistic St ...
- Hadoop-No.1之数据存储选型
文件格式 Hadoop支持多种面向数据存储的文件格式,包括纯文本和Hadoop特有的格式,如SequenceFile.还有一些更加复杂但功能更加丰富的格式可供选择,如Avro与Parquet.不同的格 ...
- MVVM(使用Prism框架)开发WPF
[MVVM]目的是为了分离视图(View)和模型(Model)的耦合——解耦 1.View负责前端展示,与ViewModel进行数据和命令的交互.(双向的数据属性传递,单向的命令属性传递View→Vi ...
- angular打包(三):pkg
希望打包成1个web服务,运行exe,启动 angular,供浏览器显示. 问题分析: 其实angular编译后,都是静态文件了.只需要打包express,让express可以以exe的形式运行就可以 ...
- 卸载brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninst ...
- 第六天-css基础(css定位)
css定位 方位名称: left right top bottom position:absolute 绝对定位(脱离标准流 div{ width:100px; height:100p ...
- [CSP-S模拟测试]:那一天她里我而去(堆优化Dijkstra)
题目传送门(内部题3) 输入格式 每个测试点有多组测试数据.第一行有一个正整数T表示数据组数.接下来对于每组数据,第一行有两个正整数n,m分别代表图的点数和边数.接下来有m行,每行三个整数u,v,d表 ...
- oracle 中怎样实现分页和去处重复
oracle 中用关键字 rownum 来进行分页 rownum 不能使用大于号,只能是使用小于号,可以使用子查询和rownum一起使用来创建分页 SELECT * FROM ( SELECT e. ...
- javascript中“use strict”的好处和坏处
1.为什么使用严格模式? 消除javascript语法的一些不合理.不严谨之处,减少一些怪异行为: 消除代码运行的不安全之处,保证代码的运行: 提高编译效率,增加运行效率: 为未来新版本的javasc ...