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. 使用Eclipse中的反编译插件jadClipse查看Class源码

    功安装完插件jadClipse 之后便可以查看源码class文件了 但是对于自己代码的class文件,直接复制过来却看不到,需要以下操作. 将此文件以及文件夹直接拷贝到Eclipse中发现 右击项目- ...

  2. 文本三剑客之awk

    awk和流编辑器sed在工作原理和用法上有很多类似之处,它们都是检查输入数据中的行是否匹配指定的模式,如果匹配成功就对匹配的行执行相应的操作,重复这个过程直到所有的输入数据都被处理完,因此awk和se ...

  3. 【HDU 1402】A * B Problem Plus(FFT)

    Problem Description Calculate A * B. Input Each line will contain two integers A and B. Process to e ...

  4. 简单的MVC 权限管理

    花了3天时间研究了下对于 NHibernate+MVC4+bootstrap+Redis(这个是选配只做了登陆测试)+T4 这些都是第一次使用.用着有些生硬权当鼓励下自己,记录下来有空就继续完善. 思 ...

  5. scrapy_redis使用介绍

    scrapy_redis是一个基于redis的scrapy组件,通过它可以快速实现简单的分布式爬虫程序,该组件主要提供三大功能: (1)dupefilter——URL去重规则(被调度器使用) (2)s ...

  6. MindManager 设置默认Note字体大小

    工具栏 Design > Notes Theme > Default Font

  7. BNUOJ 1575 Supermarket

    Supermarket Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID ...

  8. python004 Python3 解释器

    Python3 解释器Linux/Unix的系统上,一般默认的 python 版本为 2.x,我们可以将 python3.x 安装在 /usr/local/python3 目录中.安装完成后,我们可以 ...

  9. 【ITOO 2】.NET 动态建库建表:使用SQL字符串拼接方式

    导读:在最近接手的项目(高效云平台)中,有一个需求是要当企业用户注册时,给其动态的新建一个库和表.刚开始接手的时候,是一点头绪都没有,然后查了一些资料,也问了问上一版本的师哥师姐,终于有了点头绪.目前 ...

  10. HDU 4578 线段树复杂题

    题目大意: 题意:有一个序列,有四种操作: 1:区间[l,r]内的数全部加c. 2:区间[l,r]内的数全部乘c. 3:区间[l,r]内的数全部初始为c. 4:询问区间[l,r]内所有数的P次方之和. ...