React Native之组件Component与PureComponent

众所周知，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 (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps)
|| !shallowEqual(inst.state, nextState);
}

PureComponent 的shouldComponentUpdate() 只会对对象进行浅对比，如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断。所以，在实际使用的时候，当你期望只拥有简单的props和state时，才去继承Pure