【转载出处】
PureComponent 和 Component 的不同在于前者提供了一个 shouldComponentUpdate
的默认实现。
继承于 Component 的组件没有实现默认的 shouldComponentUpdate
方法,每一个 props 的变化以及内部的 setState 方法的调用都会触发重绘。
继承于 PureComponent 的组件,默认在 shouldComponentUpdate 中比较将 props 和 state 中的每一项进行浅比较(shallow comparison)。如果有不同才重绘。所以如果在 PureComponent 内 setState
就一定要保证 setState
的对象和之前的对象的地址不同,否则比如修改对象中的某个字段这种在 PureComponent 中是不会重绘的。
shallow comparison究竟是什么呢?
对于基本类型
(primitives),例如数字或者布尔值,来说,浅拷贝将会检查其值是否相同,例如1与1相等,true与true相等。
对于引用类型
的变量,例如复杂的javascript对象或者数组,来说,浅拷贝将仅仅检查它们的引用值是否相等。这意味着,对于引用类型的变量来说,如果我们只是更新了其中的一个元素,例如更新了数组中某一位置的值,那么更新前后的数组仍是相等的。
JavaScript 中共有 6 种基本数据类型:Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) !
除过上面的 6 种基本数据类型外,剩下的就是引用类型了,统称为 Object 类型。细分的话,有:Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。