React PureComponent vs Component在呈现相同的计数的情况下
React PureComponent和Component是React中的两种组件类型，它们在呈现相同计数的情况下有一些区别。
React Component是React中最基本的组件类型，它是一个普通的JavaScript类，继承自React.Component。当组件的props或state发生变化时，Component会重新渲染整个组件树。这意味着即使组件的props或state没有实际变化，但如果父组件重新渲染，Component也会重新渲染。这可能会导致性能问题，特别是在组件树较大或组件更新频繁的情况下。
React PureComponent是React提供的一个优化版组件类型。它继承自React.PureComponent，自动实现了shouldComponentUpdate方法。shouldComponentUpdate用于判断组件是否需要重新渲染，如果返回false，组件将不会重新渲染。React PureComponent会对组件的props和state进行浅比较，只有在它们发生实际变化时才会重新渲染。这样可以避免不必要的渲染，提高性能。
在呈现相同计数的情况下，使用React PureComponent相比Component可以带来性能上的优势。因为React PureComponent会自动进行浅比较，只有在props或state发生实际变化时才会重新渲染，而Component则会在父组件重新渲染时无条件重新渲染。所以，如果组件的props或state在相同计数下保持不变，使用React PureComponent可以避免不必要的渲染，提高性能。
然而，需要注意的是，React PureComponent的浅比较只能比较简单的数据类型，对于复杂的数据类型（如对象或数组），浅比较可能会出现误判。在这种情况下，可以考虑使用React.memo来对函数组件进行优化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent Real-Time Rendering Engine）：https://cloud.tencent.com/product/trre
相关·内容
2回答
React PureComponent vs Component在呈现相同的计数的情况下
javascript、reactjs
在一个React类模块中，如果在PureComponent中渲染的次数和在组件中渲染的次数相同，我应该使用哪一个？PureComponent总是比Component更快，更好？
浏览 14提问于2020-05-21得票数 0
回答已采纳
1回答
记住已渲染的数组中的对象
reactjs、typescript
到目前为止，我所做的是重新呈现组件，以便在滚动条到达底部时显示更多新闻。有没有可能让已经呈现的新闻留在内存中，至少不被重新呈现，而只是重新呈现新<em
浏览 1提问于2018-09-14得票数 0
2回答
React:在兄弟之间传递数据，而不导致重发。
javascript、reactjs
|---- C (Child) |---- E (Child)我试着使用useContext或一个简单的回调，但是在每种情况下，状态都在A中保持，这使得我的整个应用程序都变成了重发程序。你知道怎么用合适的方式制作ii吗？
浏览 1提问于2020-09-15得票数 0
回答已采纳
2回答
如何在启动时只呈现一次响应组件？
javascript、performance、reactjs
我一直在读关于表演的文档，但我找不到答案.对于在应用程序启动时只呈现一次的</em
浏览 3提问于2017-01-22得票数 7
回答已采纳
2回答
如果组件在状态中接收到相同的值，是否重新呈现该组件？
reactjs
我试图检查是否设置了与以前相同的值，是否重新呈现组件，或者如果发现该值相同，则将避免重新呈现。
浏览 0提问于2018-10-03得票数 15
回答已采纳
3回答
我被告知React的纯组件可以有state，也可以用setState来改变它。有状态的组件被称为“纯”的感觉是错误的。这是正确的吗？如果是这样的话，它怎么会是纯的？如果重要的话，我说的是从PureComponent类扩展并使用setState方法的基于类的组件。
浏览 0提问于2019-08-06得票数 0
回答已采纳
1回答
使用无状态组件响应备忘录
reactjs
在引入memo和hook之前，所有的功能组件都是无状态的。是React.memo，用于只使用钩子的函数。是否应该将(所有无状态功能组件)更新为React.memo以进行优化？还是在函数不自动使用钩子时对其进行优化？
浏览 1提问于2019-10-28得票数 0
回答已采纳
2回答
是否有反应组件深入比较道具，以检查是否需要改进机？
javascript、reactjs
我想知道扩展React.Component的React在试图决定它是否需要改进型时是否对对象进行了深入的比较。例如，给出 return <div>{bar.baz}</div> return <Foo bar={this.state.bar} &
浏览 1提问于2018-10-25得票数 17
回答已采纳
4回答
PureComponent上的Specialized shouldComponentUpdate
javascript、reactjs
我正在尝试创建一个当某个属性为真时不应该执行的组件，但应该执行浅层比较(PureComponent的默认设置)。我尝试过执行以下行为： shouldComponentUpdate有没有什么方法可以“利用”PureComponent的浅显比较而不编写我自己的代码？
浏览 0提问于2018-02-15得票数 13
3回答
如果我使用setState，但是状态值保持不变，那么将响应重命名器吗？
javascript、reactjs
假设我目前有一个带有状态{random: 1}的React组件。如果我打电话它会触发重渲染吗？如果是这样的话，在调用setState时是否可以阻止重新呈现，但是状态不会这样改变？
浏览 0提问于2021-01-07得票数 0
回答已采纳
2回答
内置的反应本机组件是纯的吗？
react-native、react-hooks
我在文档中发现Flatlist，SectionList是PureComponents。没有任何关于其他组件(例如TouchableOpacity)的信息。我想知道哪些RN内建组件是纯在必要时使用useCallback的。
如果所有其他组件都不是纯的，则本例中没有必要使用useCallback。
浏览 2提问于2020-06-16得票数 5
回答已采纳
1回答
ReactJS组件在状态更改时呈现两次
reactjs
我有一个我正在工作的组件，但为了举例说明我的问题，我把它降到了最低限度：class App extends React.Component{ return(marginTop:"100px"}}><PhnGrid/></div></div> }export default App;class PhnGrid extends React</
浏览 1提问于2020-07-03得票数 0
2回答
防止在状态发生变化时呈现子组件
javascript、reactjs
我有父母和孩子的反应。在这里，我将id作为一个支柱从父传递到子，并保存使用状态输入的文本区域的值。每当我在文本区域打字时。更新子组件。如何防止在文本区域中输入的每个值更新子组件？请帮帮我。 constructor() { }
componentWillMount(){console.log('child componen
浏览 2提问于2017-08-21得票数 3
回答已采纳
2回答
在悬停时响应按钮闪烁的onHover
javascript、reactjs、antd
当我使用antd创建按钮时，如下所示：import { Button } from 'antd';
constructor(props) { this.state，但如果我按如下方式制作一个按钮：
import R
浏览 2提问于2020-05-15得票数 0
回答已采纳
1回答
反应本机PureComponent和shouldComponentUpdate
reactjs、react-native
我需要知道shallow comparison在使用PureComponent时的含义。实际上，我读了一些糖果，但我不明白它的意义，所以请简化它。另一个问题是，我们什么时候可以使用PureComponent，什么时候使用shouldComponentUpdate？
浏览 2提问于2020-07-13得票数 0
2回答
停止重新呈现一个子组件
reactjs、react-props
我使用react-card-flip来创建一个应用程序。子组件从父组件获得道具。如何防止道具更改(重新渲染)时，特定的一个翻转？结构是这样的：<YOUR_FRONT_CCOMPONENT>，这是卡片的正面。单击以翻转</YOUR_FRONT_CCOMPONENT> This is the back of the card.<button onClick={this.handleClick}&
浏览 1提问于2021-05-17得票数 0
2回答
如何防止React重新呈现整个组件
javascript、reactjs
我有一个名为isMobile的道具，它显示一个外部iframe。当我在iPad上倾斜屏幕时，这将更改属性以更改值并重新呈现iframe (丢失iframe中的所有进度)。
什么是防止重新渲染的好方法？
浏览 0提问于2018-10-18得票数 6
2回答
React:如何使用map()呈现多个菜单而不导致重新呈现？
javascript、reactjs、redux
我有一个名为<SiteMenu />的组件。在我的呈现函数中，我有以下三行： { this.renderPrimaryMenu() }
{ secondaryMenuContents && this.renderSecondaryMenu，它都会重新呈现整个组件。其中一个菜单使用静态JSON (renderPrimaryMenu())，而另外两个菜单依赖于来自API的两个单独调用中的数据，因此数
浏览 3提问于2017-11-04得票数 0
回答已采纳
2回答
我是新的反应，我有一个代码功能运行所有4秒(计时器)。这个计时器设置一个变量。大多数情况下，VariableA是错误的。那么，我应该首先检查变量是否为false，还是应该作出反应，检查变量是否为false？
浏览 1提问于2018-01-30得票数 0
回答已采纳
1回答
如果我定义了一个PureComponent
...is实际上与无状态功能组件相同吗？还是在行为或表现上有什么不同？这不是的复制，因为我的问题的答案没有包含在那里，至少在很容易找到的方式上是这样的。这是一个大的、广泛的问题，我的问题非常具体。
浏览 1提问于2018-02-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
