React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的。

原理:在普通的 componnet 组件中,shouldComponentUpdate 使用来限定组件是否应该被更新的,他的默认返回值都是 true,所以即便是 state 和 props 没有发生改变时,也会导致组件重绘。因此针对上述情况,React 引入了 PureComponent 纯组件,它改变了 shouldComponentUpdate 生命周期方法,会自动判断 state 和 props 是否发生了变化,从而判断是否要重新渲染组件。

弊端:纯组件 pureComponent 并使不是像他的优点一样,让人觉得很爽,千万不能头脑发热就把所有的组件都改成纯组件。

   因为纯组件是浅比较,对比的是对象的引用,所以组件内部 state 和 props 发生改变时,它并不知道 state 和 props 发生了改变,所以千万不能乱使用。

react 中的 PureComponent的更多相关文章

  1. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  2. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  3. 在react中实现打印功能

    最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...

  4. 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

    本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...

  5. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  6. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  7. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  8. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  9. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

随机推荐

  1. bzoj3336 Uva10572 Black and White

    题目描述: 数据范围:2<=n,m<=8 题解: 很明显需要状压.但是怎么压不知道,压什么不知道. 然后从条件下手. 条件1要求黑色在一起白色在一起,记录轮廓线很容易做到. 条件2要求不能 ...

  2. 第七章:systemverilog过程语句

    systemverilog增加了一些新的操作符和过程语句: 1.新的操作符 递增/递减 赋值操作符 设置成员操作符inside 有无关通配符==?/!=? 操作数改进(类型/尺寸/符号强制转换) 2. ...

  3. python基础知识02-序列类型的方法

    列表的方法: 增:append() insert() extend()只能添加序列类型. .改li[0]= '123' li.insert(2,'123') 2个参数,位置,值 li.remove(' ...

  4. 周三面试Python开发,这几道Python面试题差点答错,Python面试题No7

    第1题:阅读下面的代码,默读出A0,A1至An的最终值. A0 = dict(zip(('a','b','c','d','e'),(1,2,3,4,5))) A1 = range(10) A2 = [ ...

  5. 「LibreOJ β Round #3」绯色 IOI(抵达)

    [题解] 我们可以发现叶子节点的关联点一定是它的父亲节点,那么我们dfs一遍就可以求出所有节点的关联点,或者判断出无解. 对于每个点i,它的关联点u的危险度肯定比它连接的其他点vi的危险度小,我们从u ...

  6. 实验:iscsi共享存储

    实验名称: iscsi共享存储 实验环境: 我们需要准备一个磁盘,对于这个磁盘我们需要使用,将这个磁盘空间共享给iscsi客户端: 实验需求: 我们这里使用两台服务器来实现iscsi共享存储: 1.指 ...

  7. jquery select 常用操作总结

    由于在项目各种所需,经常碰到select不种操作的要求,今天特意总结了一下,分享: jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id&q ...

  8. [luoguP1947] 笨笨当粉刷匠_NOI导刊2011提高(10)(DP)

    传送门 f[i][j][k]表示前i行,最后一行前j个,选k次最优解 ntr[i][j][2]表示当前行区间i~j涂0或1所能刷的正确格子 #include <cstdio> #defin ...

  9. Request获取Session的两种方式

    1.无请求参数 public HttpSession getSession() 获取当前request关联的session,如果当前request没有session,创建一个session. 2.有请 ...

  10. TOYS(poj 2318)

    题意:就是给了m个点,落在n+1个区域中,问各个区域有多少个点. /* 对于每个玩具,二分其所在的区间,然后用叉积判断. 但是我觉得枚举好像时间复杂度也可以. */ #include<cstdi ...