React中Component与PureComponent的区别

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要求满足如下条件：

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