React Native之组件Component与PureComponent

本文详细介绍了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 (
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

xiangzhihong8

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

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

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

打赏作者

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

抵扣说明:

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

余额充值