react 中的 PureComponent
React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的。
原理:在普通的 componnet 组件中,shouldComponentUpdate 使用来限定组件是否应该被更新的,他的默认返回值都是 true,所以即便是 state 和 props 没有发生改变时,也会导致组件重绘。因此针对上述情况,React 引入了 PureComponent 纯组件,它改变了 shouldComponentUpdate 生命周期方法,会自动判断 state 和 props 是否发生了变化,从而判断是否要重新渲染组件。
弊端:纯组件 pureComponent 并使不是像他的优点一样,让人觉得很爽,千万不能头脑发热就把所有的组件都改成纯组件。
因为纯组件是浅比较,对比的是对象的引用,所以组件内部 state 和 props 发生改变时,它并不知道 state 和 props 发生了改变,所以千万不能乱使用。
react 中的 PureComponent的更多相关文章
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
随机推荐
- Nginx Location和Rewrite总结
Nginx 版本:nginx/1.10.3 (Ubuntu) Location 部分: 第一步:创建Nginx 虚拟主机 Nginx 安装成功安装并且可以运行之后,在 /etc/nginx 目录下创建 ...
- day17-python之文件操作
1.内置函数 #!/usr/bin/env python # -*- coding:utf-8 -*- # print(abs(-1)) # print(abs(1)) # # print(all([ ...
- STM32--TIM定时器时钟分割(疑难)
不太明白 (1) TIM_Perscaler来设置预分频系数: (2) TIM_ClockDivision来设置时钟分割(时钟分频因子): (3) TIM_C ...
- Codeforces 5D Follow Traffic Rules
[题意概述] 某个物体要从A途经B到达C,在通过B的时候速度不能超过vd. 它的加速度为a,最大速度为vm:AB之间距离为d,AC之间距离为L: 问物体最少花多少时间到达C. [题解] 分情况讨论. ...
- [第一波模拟\day2\T1] {病毒分裂}(split.cpp)
[题目描述] A 学校的实验室新研制出了一种十分厉害的病毒.由于这种病毒太难以人工制造了,所以专家们在一开始只做出了一个这样的病毒.这个病毒被植入了特殊的微型芯片,使其可以具有一些可编程的特殊性能.最 ...
- angular中的http拦截器Interceptors
在angularJs中增加了一个对全局的http请求统一做出处理的api--interceptors Interceptors 有两个处理时机,分别是: 其它程序代码执行 HTTP 请求之后,在实际从 ...
- Spring☞WebApplicationContext的继承关系
spring mvc里的root/child WebApplicationContext的继承关系 在传统的spring mvc程序里会有两个WebApplicationContext,一个是pare ...
- InnoDB透明页压缩与稀疏文件
此文已由作者王慎为授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. MySQL 5.7中包括了很多让人耳目一新的新特性,其中就包括了InnoDB Transparent Pag ...
- Leetcode 240.搜索二维矩阵II
搜索二维矩阵II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有 ...
- rac的不完全恢复
模拟rac的不完全恢复,虽然小鱼对常规的完全和不完全恢复已经轻车熟路了,还是记录一个不完全恢复完整过程记录下来. 1 首先小鱼做了一个完全备份. RMAN> backup database in ...