React之Component和PureComponent区别

天落枫 天落枫 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 458平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-04-29 00:00:00 发布 458 阅读 AI 写同款· GEO 优化 ›
React中Component与PureComponent的区别 Component是React App的基本构建的单位，也是React中的基本代码复用单位。PureComponent与Component在除了其shouldComponentUpdate方法的实现之外几乎完全相同。PureComponent已经替我们实现了shouldComponentUpdate方法。 对于PureComponent而言，当其props或者state改变之时，新旧props与s... 阅读详情

文章目录

1 两者区别

抓住最根本的区别：PureComponent内置了shouldComponentUpdate方法，自动进行了判断，使用的是浅比较判断state和props是否变化，由于是浅比较使用的是===，即判断的是引用地址是否变化，当无变化返回false，不更新render，返回true，更新render。

我们知道继承Component后，默认的shouldComponentUpdate返回true，即只要你不重写该方法，则如果进入该方法则每次都会更新render，而PureComponent为我们重写了该方法，如果你在PureComponent中手动重写该方法会有警告，且不会调用你写的方法。

1.1 组件props和state是基础数据类型

这种情况下，Component和PureComponent产生的结果是相同的，因为只要props或state变化，浅比较结果都是true，这和Component默认的方法结果相同，都会重新render

1.2 组件props和state含有引用数据类型

如果props和state含有js对象或者数组等引用数据类型，则浅比较结果无法判断出该对象是否改变，从而导致如果改变引用数据类型，页面不会触发render

而继承Component的组件则不会出现这种情况，因为每次更改state或props其默认都会进行重新渲染

1.3 父组件继承Component，子组件继承PureComponent

这种情况下，父组件正常更新，而子组件按照上两种情况更新

1.4 父组件继承PureComponent

此时，父组件按照1.1和1.2进行更新，即父组件state和props中引用数据类型的改变无法触发重新render，子组件无论继承何种都不会更新

2 适用范围

两种组件对state和props都在一定场景下表现出性能优势

如果组件的state和props含有引用数据类型，只能使用：继承Component组件
如果组件state和props更新频繁，首选：继承Component组件（频繁的浅比较也是很消耗性能）
如果需要进行自定义判断是否render，只能使用：继承Component组件
如果state和props只包含基础数据类型，推荐使用：继承PureComponent组件

收录于
React

当前文章被收录于：

React
22 篇文章 2 人学习
订阅专栏 查看详情
标签
#react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
RPA机器人技术原理初探 RPA初步 阅读详情

相关推荐

XC7Z010-1CLG400C开发板ADC引脚配置全攻略（附完整引脚列表）

本文详细解析了XC7Z010-1CLG400C开发板的ADC引脚配置方法，涵盖XADC模块基础、CLG400封装的引脚布局、硬件设计规范及Vivado工程配置实战。特别提供了完整的引脚列表和性能优化技巧，帮助开发者高效实现模拟信号采集，适用于Zynq-7000系列开发。

weixin_29188043的博客 465

React解密：React中PureComponent和Component的区别是什么

提到PureComponent，应该并不是react与生俱来就有的，而应该是在15.3版本之后才出现的，主要是为了取代之前的PureRenderMixin。所以对于几年不怎么接触react的我来说，当提到PureComponent的时候，还是有那么些许的懵逼。更不要说它于Component的区别是什么？那么我们先来看看pureComponent是个什么鬼？ PureComponent其实就是一个继承自Component的子类，会自动加载shouldComponentUpdate函数。当组件需要更新的时候，

lee前端技术站 6720

F460 CLK配置功能模块说明

F460CLK配置功能模块说明 目录 F460CLK配置功能模块说明 CLK配置： 1. DDL_ICG——初始化配置 2. DDL_UTILITY——基础功能函数 3.DDL_PRINT-待细化 4.DDL_ADC 5.DDL_AES——AES 加解密算法处理器 6.DDL_CAN 7. DDL_CLK 8. DDL_CMP——电压比较器 9. DDL_CRC 10. DDL_DCU——数据计算单元 11. DDL_DMAC——DMA 控制器 ...

childboy的博客 2455

Component和PureComponent的区别

文章目录Component和PureComponent的区别介绍区别点：PureComponent缺点PureComponent优势为什么PureComponent比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断？ ReactNative系列-文章 Component和PureComponent的区别 介绍 React.PureComponent 与 React.Component...

覃大畅的博客 3万+

三相逆变器双pi控制器参数如何调节_光伏逆变器短路特性简析

1前言短路故障相对于其他故障类型来说是比较常见的，不同的设备的短路故障，大了讲都一样，细了说各有千秋，今天我们主要聊聊光伏逆变器的短路特征。电力系统中的电源，传统意义是指的是并入电力系统的同步发电机。但随着分布式发电技术的发展，各种形式的发电装置并入电力系统。按照分布式电源并网的方式，我们大致可以分为以下三类：➤通过旋转电机和变流器并联并网的电源，主要指双馈风力发电系统；➤仅仅通过变流器...

weixin_39901404的博客 1732

【漆学军】MT4进阶到MT5速成之路（2）获取持仓

MT5在持仓获取上，要比MT4复杂些，分两部分，获取持仓和挂单采用了不同的方法。 一、获取持仓中的buy和sell单 int b=0;//获取buy单个数 int s=0;//获取sell单个数 double lot_total_buy=0;//获取持仓中buy单的总手数 double lot_total_sell=0;//获取持仓中sell单的总手数 for(int i=0; i<PositionsTotal(); i++) { ulong ticket=Positi

漆学军的编程笔记 1623

React里PureComponent和Component的区别

一、总体来说，他们区别不大，几乎完全相同，也可以理解为，Purecomponent是一个有条件的更具性能的Component。 区别： 当props和state改变时，PureComponent会对props和state进行浅比较，Component并不会比较当前（current）和下一个状态（next）下的props和state，除非具有浅比较功能的shouldComponentUpdate方法被调用，此时Component组件是否渲染会基于方法的return值； 结合react源码，一个类组件（Clas

IT小透明 1798

Python爬虫实战：手把手教你园林植物分类全维度字典自动化采集实战！

我长期专注 Python 爬虫工程化实战，主理专栏 👉 《Python爬虫实战》：从采集策略到反爬对抗，从数据清洗到分布式调度，持续输出可复用的方法论与可落地案例。内容主打一个“能跑、能用、能扩展”，让数据价值真正做到——抓得到、洗得净、用得上。

喵手的博客 388

PureComponent和Component的区别和底层处理机制

的默认实现可以避免一些不必要的渲染，但它并不是完全自动化的，也不能保证在所有情况下都能正确地避免不必要的渲染。在比较属性时，我们可以使用浅比较或者深比较来实现，具体方法取决于属性的数据类型和结构。3.如果需要重新渲染组件，React会根据虚拟DOM的增量更新算法计算出需要更新的节点，并将变化应用到DOM上。没有发生变化，则阻止组件的重新渲染，提高性能。高阶组件对组件进行包装，将组件包装成具有浅比较优化功能的组件。方法，对组件的属性进行比较，避免不必要的重新渲染。都会导致组件的重新渲染，甚至在组件的。

qq_52563729的博客 3270

【信息系统项目管理师】第1章：信息化发展 考点梳理

本文主要详细梳理高项：信息化、新型基础设施建设、两化融合、数字中国、数字化转型与元宇宙等内容。

数据知道的博客 8565

一文探讨视频秒开：m3u8视频格式与视频秒开优化

秒开指的是，一秒内成功加载的播放数/播放总数。本意是想对比一下m3u8与mp4视频格式，并了解m3u8格式优缺点，以确定一个大概优化方向。但对m3u8做简单了解后，觉的m3u8可能是一个优化方向。

bjxiaxueliang的CODING小栈 2万+

React Component和Purecomponent区别

PureComponent是一个优化过的组件类，它默认实现了一个浅比较的shouldComponentUpdate函数。当组件的props或state发生变化时，PureComponent会对新旧props和state进行浅比较，如果没有变化，则不重新渲染组件。Component是一个普通的组件类，它的shouldComponentUpdate函数默认返回true，意味着每次组件的props或state发生变化时都会重新渲染组件。这可能会导致性能问题，特别是当组件包含大量子组件时。

weixin_59525879的博客 719

MFC C++ 中开发 PLC 通信客户端

OPC UA | 工业标准化通信 | `open62541`（开源OPC UA库）或 `UA-.NET` 封装 | 跨平台、安全可靠，支持复杂数据类型 |- 连接句柄（`modbus_t*`/`UA_Client*`/`TS7Client*`）不可跨线程共享，需为每个线程创建独立连接。Modbus 是工业常用协议，分 **RTU**（串口）和 **TCP**（以太网）两种模式，以下以 Modbus TCP 为例。s=Tag`），复杂类型需解析扩展对象。

寒寒豆豆软件公司的博客 136

【React】PureComponent 和 Component 的区别

在 React 中，PureComponent 和 Component 都是用于创建组件的基类，但它们有一个主要的区别：PureComponent 会给类组件默认加一个周期函数。在此周期函数中，它对会做一个浅比较，只比较第一层。如果经过浅比较，发现属性和状态并没有变化，则返回fasle，也就是不继续更新组件，有变化才会去更新。

编码世界 2万+

SAP B1中文培訓教材_SDK

公司内部培训资料，对开发工具 ，DIAPI， UIAPI，Add-ON有详细解说

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

React 的 PureComponent 与 Component 区别

1、官方文档解释 在 React 中，Component 和 PureComponent 有一些区别，官方的解释如下： React.Component is the base class for React components when they are defined using ES6 classes: class Greeting extends React.Component { ...

MichaelAn的博客 1420

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

react中Component和PureComponent的区别

我最近在看react项目的时候 发现有的组件继承的是component 有的是pureComponent? 这两个有啥区别呢？ 正常来说 一个父组件中包括一个子组件 ，当父组件的 state发生更新之后 就会render一下那么这个时候 包括在 父组件中的子组件也会跟着 render state = { name: zyc; } change = () =>{ this.setState({name: 'app'}) } <div> <button onClick={t

业余前端的职业经历 643

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

React.Component 与 React.PureComponent的区别

前言 先说说 shouldComponentUpdate 提起React.PureComponent，我们还要从一个生命周期函数shouldComponentUpdate说起，从函数名字我们就能看出来，这个函数是用来控制组件是否应该被更新的。 简单来说，这个生命周期函数返回一个布尔值，如果返回true，那么当props或state改变的时候进行更新；如果返回false，当prop...

weixin_30549657的博客 189

React 中 Component 与 PureComponent 的区别详解

是Component的优化版本，会在 props 和 state 没有浅层变化时跳过 render，从而提升性能。浅比较是使用===比较每一个prop和state的一级属性是否变化。// 示例// false（引用不同）如果你修改对象内部属性但没有更换引用，检测不到变化。特性Component是否自动优化渲染❌ 无✅ 是比较方式每次都执行 render浅比较 props/state可定制更新策略✅ 自定义 SCU❌ 覆盖后失去优化是否推荐使用一般用在逻辑复杂场景。

weixin_43991457的博客 442

React.Component、React.PureComponent、React.FC的使用与区别

React.Component 最常见的，最常用的 包含 render() React.Component 并未实现 shouldComponentUpdate() 参考链接 React.PureComponent React.FC import React, { PureComponent,Component } from 'react'; class CompareCompon...

吃瓜群众的博客 9378

[react] 解释下react中component和pureComponent两者的区别是什么？

[react] 解释下react中component和pureComponent两者的区别是什么？ 组件的state或者props更新都会触发render(),同时也会导致子组件render()重新渲染； 当我们不想子组件更新时，需要手动在shouldUpdateComponent当中返回false; pureComponent帮我们做了这部分工作 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...

歌谣的博客 323

React.Component、React.PureComponent、React.FC的区别和使用

1. React.Component 最常见的，包含最常用的render(),componentDidMount(),shouldComponentUpdate… shouldComponentUpdate(nextProps, nextState) 判断 React 组件的输出是否受当前 state 或 props 更改的影响。意思就是只要组件的 props 或者 state 发生了变化，就会重新构建 virtual DOM，然后使用 diff算法进行比较，再接着根据比较结果决定是否重新渲染整个组件。

hyupeng1006的博客 4528

React.Component和React.PureComponent的区别？

pure：纯净的，即为纯组件，可以用来优化React程序，减少render函数执行的次数，提高组件的性能。

laowang357的博客 740

react Component与PureComponent区别

React.PureComponent 与 React.Component 几乎相同 区别： Component 中只要使用了setState，是否有更改，都会重新渲染组件（包括子组件），如需判断是否要重新渲染组件，需要借助shouldComponentUpdate PureComponent 在原来Component 基础上自动添加了一个shouldComponentUpdate ，处理规则：对对象进行浅对比(指向地址变量，内容不变) 规则如下： function isReset

前端-小鑫 225

React -- PureComponent类和Component类的区别

欢迎交流学习！！！ 持续更新中… 文章目录二者区别 总体来说，他们区别不大，几乎完全相同，也可以理解为，Purecomponent是一个有条件的更具性能的Component。 二者区别 Component是React App的基本构建的单位，也是React中的基本代码复用单位。 PureComponent与Component在除了其shouldComponentUpdate方法的实现之外几乎完全相同。PureComponent已经替我们实现了shouldComponentUpdate方法。 对于Pur.

Sco_jing的博客 209

React中React.PureComponent和React.Component有什么区别？

React.PureComponent在默认情况下实现了shouldComponentUpdate方法，它通过浅比较组件的props和state来决定是否需要重新渲染。React.Component是React中最常用的组件基类。在React中，React.Component和React.PureComponent都是用来创建组件的基类。在这个例子中，MyPureComponent与MyComponent的渲染逻辑相同，但它继承自React.PureComponent，因此具有优化的渲染行为。

alive_new的博客 914

6. React.Component 和 React.PureComponent 的区别？

6. React.Component 和 React.PureComponent 的区别？ PureComponent表示一个纯组件，可以用来优化React程序，减少render函数执行的次数，从而提高组件的性能。在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行。React.PureComponent会自动执行shouldComponentUpdate。...

能带孩子会做饭 484
上一篇： Python学习笔记——进阶
下一篇： React优化手段
点赞 0
评论 0
书签 书签 2
天落枫
天落枫
博客等级 码龄10年 91粉丝 92原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值