在部分机型设备上，深层次的嵌套可能会导致堆栈溢出。因此要尽可能地减少 dom 嵌套层级，一般页面嵌套层级需控制在 14 层以内。
当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。PureComponent 实现了 shallowEqual ，自动帮我们做了一层浅比较。
shallowEqual 会比较 Object.keys(state | props) 的长度是否一致，每一个 key 是否两者都有，并且是否是一个引用，也就是只比较了第一层的值，确实很浅，所以深层的嵌套数据是对比不出来的。
如果你的 ListItem 组件，内部都是扁平化的 props 或 state，那么可以使用。
import { createElement, PureComponent, PropTypes } from 'rax';
import { View, Image, Link, Checkbox } from 'nuke';
class ListItem extends PureComponent {
constructor(props) {
super(props);
}
render() {
const { text, pic } = this.props;
return (
<View>
<Text>{text}</Text>
<Image source={{ uri: pic }} />
</View>
);
}
}
复杂状态与简单状态不要共用一个组件
一个普通的长列表，其每一项由 ListItem 组件构成，而一个复杂的 ListItem ，可能包含若干个 PureComponent 组成的组件。
// 伪代码展示 <ListView> <ListItem /> <ListItem> <PureModA /> <PureModB /> </ListItem> </ListView>
PureComponent 涵盖的场景有限，在 PureComponent 不适用的情况下，你需要使用 shouldComponentUpdate ，避免无效 diff。
