React.PureComponent它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现。
简单来说,就是PureComponent简单实现了shouldComponentUpdate()的功能
当然,如果你的数据结构比较复杂就不行了

首先看看第一段代码

 import React from 'react'

 class Child extends React.Component {

   render() {
console.log('child render')
return <div>child</div>;
}
} class App extends React.Component {
state = {
a: 1,
}; render() {
console.log('render');
return (
<>
<button
onClick={() => {
this.setState({ a: 2 });
}}
>
Click me
</button>
<Child color={'red'}/>
</>
);
}
} export default App

当我们点击按钮更新了父组件的状态,那么子组件也会重新render,那么这个时候输出的是:

parent render
child render

当我们想优化组件render的时候,我们会使用shouldComponentUpdate() 。那么我现在把上面的 Child 组件替换为如下:

 class Child extends React.Component {

   shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true
}
} render() {
console.log('child render')
return <div>child</div>;
}
}

这个时候,我们点击按钮更新父组件状态的时候,子组件的是不会render的,输入的是:

parent render

最后,我们在把child组件替换为如下:

 class Child extends React.PureComponent {
render() {
console.log('child render')
return <div>child</div>;
}
}

你会发现它和上图的Child组件是一样的效果,同样只输出了:

parent render

Component 和 PureComponent 的区别;复制demo,肉眼可以的区别的更多相关文章

  1. Component、PureComponent源码解析

    1.什么是Component,PureComponent? 都是class方式定义的基类,两者没有什么大的区别,只是PureComponent内部使用shouldComponentUpdate(nex ...

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

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

  3. JavaScript中Element与Node的区别,children与childNodes的区别

    关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...

  4. ThinkPHP中实例化对象M()和D()的区别,select和find的区别

    原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在 ...

  5. MongoDB之一介绍(MongoDB与MySQL的区别、BSON与JSON的区别)

    MySQL与MongoDB的操作对比,以及区别 MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL ...

  6. C++中结构体与类的区别(struct与class的区别)

    转载来源:http://blog.sina.com.cn/s/blog_48f587a80100k630.html C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据 ...

  7. 详细解说Windows 8.1与Windows 8的区别(Win8.1与Win8区别)

    详细解说Windows 8.1与Windows 8的区别(Win8.1与Win8区别) 本文转自“吾乐吧软件站”,原文链接:http://www.wuleba.com/?p=23082 最近,吾乐吧软 ...

  8. Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  9. GIT(6)----fork和clone的区别,fetch与pull的区别

    参考资料: [1].Git学习笔记:fork和clone的区别,fetch与pull的区别 [2].在Github和Git上fork之简单指南

  10. UTF-8和GBK编码之间的区别(页面编码、数据库编码区别)以及在实际项目中的应用

    第一节:UTF-8和GBK编码概述 UTF-8 (8-bit Unicode Transformation Format) 是一种针对Unicode的可变长度字符编码,又称万国码,它包含全世界所有国家 ...

随机推荐

  1. Springboot 系列(十五)如何编写自己的 Springboot starter

    1. 前言 Springboot 中的自动配置确实方便,减少了我们开发上的复杂性,那么自动配置原理是什么呢?之前我也写过了一篇文章进行了分析. Springboot 系列(三)Spring Boot ...

  2. SpringBoot2.X整合Actuator

    一 说明 Actuator 的定义 actuator 是一个制造术语,指的是用于移动或控制某物的机械装置.执行器可以通过一个小的变化产生大量的运动. 要将 actuator 添加到基于 Maven 的 ...

  3. 关于./xhost: unable to open display问题的解决

    看了很多大同小异的帖子,都没能解决这个问题,以下是我的实测经验,注意第三步,很关键. 注:以下操作在确保vncserver.xdpyinfo服务正常的情况下进行 第一步:root登录,启动vncser ...

  4. 怎么用Vuecli 3.0快速创建项目

    一.安装 1.安装node.js,这里需要注意的是,Vue CLI 3需要 nodeJs ≥ 8.9,所以我们去中文官方下载地址:http://nodejs.cn/download/,下载最新版本即可 ...

  5. Vue运用

    目录结构: ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │   ├── build-server.js 运行本地构建服务器,可以访问 ...

  6. xml 需要转义的字符

    XML实体中不允许出现"&","<",">"等特殊字符,否则XML语法检查时将出错,如果编写的XML文件必须包含这些字符 ...

  7. 在虚拟机上的关于Apache(阿帕奇)(5)基于端口访问网站

    这篇随笔是基于端口访问网站,和前面两篇文章基于ip和基于域名一起练习效果更好 接下来分别创建三个网站数据目录 输入命令: mkdir  -p  /home/wwwroot/{8001,8002,800 ...

  8. python中小整数对象池及intern机制

    小整数对象池: Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁 Python 对小整数的定义是 [-5, 256] 这些整数对象是提前建立好的,不会被垃圾回收,所有位于这个范围 ...

  9. 前端组件用 Scope 发布 npm 包的方法

    1.引言 多人.多组织或多组件发布 npm 包到同一个仓库时,可能出现命名冲突问题. 为了解决这个问题,npm 引入了“scope”(范围)概念. 在 Angular 项目中,我们通常可以看到“@an ...

  10. Mybatis:配置解析

    配置解析  mybatis-config.xml(Mybatis核心配置文件)深深影响了Mybatis行为的设置和属性信息. 能配置的的内容 当然,并不是所有都是我们经常使用到的,下面选择经常使用的配 ...