React -- PureComponent类和Component类的区别

Posted 2021-12-03 永远没有404

欢迎交流学习！！！
持续更新中…

文章目录

• 二者区别

---

总体来说，他们区别不大，几乎完全相同，也可以理解为，Purecomponent是一个有条件的更具性能的Component。

二者区别

Component是React App的基本构建的单位，也是React中的基本代码复用单位。
PureComponent与Component在除了其shouldComponentUpdate方法的实现之外几乎完全相同。PureComponent已经替我们实现了shouldComponentUpdate方法。

对于PureComponent而言，当其props或者state改变之时，新旧props与state将进行浅对比（shallow comparison）。另一方面，Component默认的情况下其shouldComponentUpdate方法并不进行新旧props与state的对比。

那么，此处提及的shallow comparison究竟是什么呢？
对于基本类型(primitives），例如数字或者布尔值，来说，浅拷贝将会检查其值是否相同，例如1与1相等，true与true相等。对于引用类型的变量，例如复杂的javascript对象或者数组来说，浅拷贝将仅仅检查它们的引用值是否相等。
这意味着，对于引用类型的变量来说，如果我们只是更新了其中的一个元素，例如更新了数组中某一位置的值，那么更新前后的数组仍是相等的。 因此意味着相比于Component，PureCompoent的性能表现将会更好。但使用PureCompoent要求满足如下条件：

• props和state都必须是不可变对象（immutable object）。
• props和state不能有层级嵌套的结构，（否则对子层级的改变无法反映在浅拷贝中）。
• 如果数据改变无法反应在浅拷贝上，则应该调用forceUpdate来更新Component。
• 一个PureComponent的子Component也应当是PureComponent。