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. 2011 luogu P1311 选择客栈

    题目描述 丽江河边有 nn 家很有特色的客栈,客栈按照其位置顺序从 1 到 n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖 ...

  2. VS C++项目报错warning C4199: ……use /Zc:twoPhase-

    具体的报错如下: c1xx : warning C4199: two-phase name lookup is not supported for C++/CLI, C++/CX, or OpenMP ...

  3. MySQL多版本并发控制(MVCC)

    MVCC是行级锁的一个变种,但是它在很多的情况下避免了加锁操作,因此开销更低.MySQL,包括Oracle.PostgreSQL都实现了MVCC,虽然每个关系数据库实现不一样,但大都是实现了非阻塞的读 ...

  4. Navicat Premium 12破解(转载)

    一.Navicat Premium 12下载 Navicat Premium 12是一套数据库开发管理工具,支持连接 MySQL.Oracle等多种数据库,可以快速轻松地创建.管理和维护数据库. Na ...

  5. Spring Boot集成百度Ueditor

    遇到的问题: 1.将ueditor加入/static目录下,能正常显示,但是出现“请求后台配置项http错误,上传功能将不能正常使用!”(解决在下面,都是自定义上传的,如果需要官方的示例,我也无能为力 ...

  6. 数据结构实验6:C++实现二叉树类

    实验6 学号:     姓名:      专业:   6.1 实验目的 掌握二叉树的动态链表存储结构及表示. 掌握二叉树的三种遍历算法(递归和非递归两类). 运用二叉树三种遍历的方法求解有关问题. 6 ...

  7. 【Codeforces 1051D】Bicolorings

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] dp[i][j][k]表示前i列,有j个联通块下,最后一列的状态为k的方案数 k如果为1的话,表示最后一列两个块不一样,k如果为0表示一样 枚 ...

  8. Swift--错误集:couldn’t be opened because you don’t have permission to view it

    bug复现过程  把snapkit拉入代码中时,也把里面的info.plist文件拖到项目中,运行时,提示“couldn’t be opened because you don’t have perm ...

  9. wordpress网站后台打开速度很慢解决方法?

    今天就和朋友们分享下,wordpress网站后台最近打开速度很慢的原因及解决方法.推荐第三种方法 方法/步骤   1.安装插件:在插件中搜索 Disable Google Fonts,选择安装,然后启 ...

  10. Educational Codeforces Round 50 (Rated for Div. 2)F. Relatively Prime Powers

    实际上就是求在[2,n]中,x != a^b的个数,那么实际上就是要求x=a^b的个数,然后用总数减掉就好了. 直接开方求和显然会有重复的数.容斥搞一下,但实际上是要用到莫比乌斯函数的,另外要注意减掉 ...