React Native之组件Component与PureComponent

最新推荐文章于 2024-06-02 09:36:45 发布
最新推荐文章于 2024-06-02 09:36:45 发布
阅读量3.5k 收藏 3
点赞数 2
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangzhihong8/article/details/80363163
版权
本文详细介绍了React Native中Component与PureComponent的区别和原理。PureComponent通过浅比较优化了渲染性能，减少了不必要的render操作。文章还讨论了何时使用PureComponent，何时需要手动重绘，以及如何避免因深层数据结构变化导致的误判。
摘要由CSDN通过智能技术生成

众所周知，React Native的页面元素是由一个一个的组件所构成的，这些组件包括系统已经提供的组件，如View、TextInput等，还有一些第三方库提供的组件，以及自定义的组件。通常在封装组件的时候都会继承Component，不过在React 15.3版本中系统提供了PureComponent，下面就来看一下这两个组件的区别。

首先声明，PureComponent是Component的一个优化组件，在React中的渲染性能有了大的提升，可以减少不必要的 render操作的次数，从而提高性能。PureComponent 与Component 的生命周期几乎完全相同，但 PureComponent 通过prop和state的浅对比可以有效的减少shouldComponentUpate()被调用的次数。

PureComponent VS Component 原理

当组件更新时，如果组件的props和state都没发生改变，render方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。原理就是 React会自动帮我们做了一层浅比较，涉及的函数如下：

if (
了解本专栏 订阅专栏 解锁全文 超级会员免费看
xiangzhihong8
关注
专栏目录
订阅专栏
ReactNative进阶（四十七）：自定义组件_react native组件开发
2401_84434880的博客
04-27 441
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于。
Component和PureComponent的区别
慕天远的博客
09-05 1084
PureComponent通过props和state的浅对比来实现shouldComponentUpdate()。除此之外他们几乎完全相同了。 在PureComponent中，如果包含比较复杂的数据结构，当深层的数据发生变化的时候，因为浅对比所以导致界面不会更新。 如果定义了shouldComponentUpdate()，无论组件是否是PureComponent，它都会执行shouldComp...
React Native——Component（组件）
weixin_34174132的博客
07-03 201
React利用JSX语法将html标签封装成组件的形式，来插入到DOM中，可以很方便的构建出网页UI。在React Native中，组件仍是其最核心的东西，各个界面UI都是通过基础组件的拼装来实现的。 JSX React 的核心机制就是创建虚拟DOM，在虚拟DOM与实际DOM之间通过强大的Diff算法来减少对实际DOM的渲染操作以提升性能。虚拟DOM可以用原生的JS来创建，但是这样的方式让代码的可...
React Native Component
weixin_34226706的博客
02-07 203
UI显示流程： Android：通过layout布局决定UI效果，其中样式文件与界面元素写在布局中更新的功能写在代码中 备注：真正的状态机制是只数据状态周期， 有传递性，也能因为数据改变了影响UI。在Android是没有这种设计的。 Reative Native：Virtual Dom 树。 Vue用于PC端，重绘整个Dom树，React Native避免了重新绘制DOM，通过DOM映射成原生空间...
ReactNative中组件变量方法的导入导出共1页.pd
11-22
本资料“ReactNative中组件变量方法的导入导出共1页.pdf.zip”可能涵盖了如何在React Native组件中定义、共享以及导入导出变量和方法的相关知识。下面将详细阐述这些关键概念。 1. **组件变量**： - **状态（State...
reactnative布局组件
08-12
- 使用`shouldComponentUpdate`、`PureComponent`或`React.memo`来减少不必要的重渲染，提升性能。 - 使用`FlatList`或`SectionList`替代数组中的多个`View`，以提高滚动性能。 总之，React Native布局组件结合...
react-网易云信ReactNative组件
08-14
"react-网易云信ReactNative组件"显然与使用React Native进行开发相关，特别是涉及到了网易云信的集成。网易云信是网易公司提供的一种即时通讯服务，它为开发者提供了丰富的API和SDK，以便在自己的应用中实现聊天、...
简单谈下 Component和PureComponent的区别
雷佳佳的博客
12-06 531
在PureComponent中，如果包含比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断，导致界面得不到更新。
React 的 PureComponent 与 Component 区别
MichaelAn的博客
02-28 1261
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 { ...
React里PureComponent和Component的区别
IT小透明
10-21 1632
一、总体来说，他们区别不大，几乎完全相同，也可以理解为，Purecomponent是一个有条件的更具性能的Component。 区别： 当props和state改变时，PureComponent会对props和state进行浅比较，Component并不会比较当前（current）和下一个状态（next）下的props和state，除非具有浅比较功能的shouldComponentUpdate方法被调用，此时Component组件是否渲染会基于方法的return值； 结合react源码，一个类组件（Clas
React之Component和PureComponent区别
xiaopi3的博客
04-27 337
文章目录1 两者区别1.1 组件props和state是基础数据类型1.2 组件props和state含有引用数据类型1.3 父组件继承Component，子组件继承PureComponent1.4 父组件继承PureComponent2 适用范围 1 两者区别 抓住最根本的区别：PureComponent内置了shouldComponentUpdate方法，自动进行了判断，使用的是浅比较判断state和props是否变化，由于是浅比较使用的是===，即判断的是引用地址是否变化，当无变化返回false，不更
React.Component与React.PureComponent的区别
sinat_37186459的博客
05-20 806
它们主要的区别就是对于状态更新渲染DOM，判断状态是否变化的条件不同。 Component：setState状态更新都会引起dom渲染 PureComponent：react有个方法优化了shouldComponentUpdate，提高了性能，就是当props或者state改变时,会引起dom重新渲染,这里值的注意的是，当state为数组，对象等引用类型的时候，如果引用没有发生改变，它会认为sta...
React 的 PureComponent 与 Component
MichaelAn的博客
02-13 298
React 的 PureComponent 与 Component 1、官方文档解释 在 React 中，Component 和 PureComponent 有一些区别，官方的解释如下： React.Component is the base class for React components when they...
React解密：React中PureComponent和Component的区别是什么
lee前端技术站
08-25 6463
提到PureComponent，应该并不是react与生俱来就有的，而应该是在15.3版本之后才出现的，主要是为了取代之前的PureRenderMixin。所以对于几年不怎么接触react的我来说，当提到PureComponent的时候，还是有那么些许的懵逼。更不要说它于Component的区别是什么？那么我们先来看看pureComponent是个什么鬼？ PureComponent其实就是一个继承自Component的子类，会自动加载shouldComponentUpdate函数。当组件需要更新的时候，
React Native创建Component组件的方式
牛八少爷的专栏
08-27 1024
1 ES6创建组件 ES6创建Class基础Component： import React, {Component} from 'react'; export default class MainView extends Component<Props> { render() { return ( <View> ...
推荐使用：react-native-marquee — 轻松实现React Native滚动文本组件
最新发布
gitblog_00071的博客
06-02 375
推荐使用：react-native-marquee — 轻松实现React Native滚动文本组件 react-native-marqueeReact Native Marquee Text Component项目地址:https://gitcode.com/gh_mirrors/re/react-native-marquee 在React Native开发中，有时我们需要创建一个持续滚动的文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiangzhihong8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值