浅谈React组件之性能优化

高德纳: "我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。"

不要将性能优化的精力浪费在对整体性能提高不大的代码上，而对性能有关键影响的部分，优化并不嫌早。因为，对性能影响最关键的部分，往往涉及解决方案核心，决定整体的架构，将来要改变的时候牵扯更大。

1. 单个React组件的性能优化

React利用Virtual DOM来提升渲染性能，虽然每一次页面更新都是最组件的从新渲染，但是并不是将之前的渲染内容全部抛弃重来，借助Virtual DOM，React能够计算出对DOM树的最少修改，这就是React默认情况下渲染都很迅速的秘诀；

不过，虽然Virtual DOM能够将每次DOM操作量减少到最小，但，计算和比较Virtual DOM依然是一个复杂的过程；

当然，如果能够在开始计算Virtual DOM之前就判断渲染的结果不会有变化，那么就可以不进行Virtual DOM计算和比较，速度就会更快。

2.shouldComponentUpdate的默认实现方式

既然可以对组件在开始计算Virtual DOM之前判断渲染结果不会有变化时，阻止渲染的进行，从而提升性能，那么我们自然想到使用shouldComponentUpdate(nextProp,nextState)

shouldComponentUpdate函数在render函数之前调用，决定“什么时候不需要从新渲染”；

即返回一个布尔值，决定更新是否进行下去，默认返回true，若返回false则中断更新；

shouldComponentUpdate(nextProp,nextState){  return (nextProp.completed !== this.props.completed) ||    (nextProp.text !== this.props.text)}

其中nextProps为此次更新传入的props，对于这个组件，影响渲染内容的prop只有completed和text，只要确保这两个prop没有变化，shouldComponentUpdate就可以返回false阻止没必要的更新

但是，上述的比较只是‘浅层比较'，如果类型是基本类型，只要值相同，那么“浅层比较”

也会认为二者相同：

那，如果prop的类型是复杂的对象怎么办？

对于复杂对象，‘浅层比较'的方式只看这两个prop是不是同一个对象的引用，如果不是，哪怕对象中的内容完全一样也会认为是不同的两个prop。那么使用“深层比较”：但对对象的结构是无法预知的，如果递归对每个字段都进行“深层比较”，不光会让代码更加复杂，也可能会造成性能问题。

所以，要想判断前后的对象类型的prop是相同的，就必须要保证prop是指向同一个JavaScript对象：

<Foo styleProp = {{color: "red"}}>

要避免使用上面的传入方式，应为每次渲染都会重新创建{color: "red"}对象，引用地址每次都不同，将导致每次的styleProp都不同。