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。