react组件拆分的重要性

根据上面的分析，react的性能瓶颈主要表现在：

对于props和state没有变化的组件，react也要重新生成虚拟DOM及虚拟DOM的diff。

用shouldComponentUpdate来进行性能优化

针对react的性能瓶颈，我们可以通过react提供的shouldComponentUpdate方法来做点优化的事，可以有选择的进行组件更新，从而提升react的性能，具体如下:

shouldComponentUpdate需要判断当前属性和状态是否和上一次的相同，如果相同则不需要执行后续生成虚拟DOM及其diff的过程，否则需要更新。

（学习视频分享：javascript视频教程）

具体可以这么显示实现：

shouldComponentUpdate(nextProps, nextState){   return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state)
}

其中，isEqual方法为判断两个对象是否相等(指的是其对象内容相等，而不是全等)。

通过显示覆盖shouldComponentUpdate方法来判断组件是否需要更新从而避免无用的更新，但是若为每个组件添加该方法会显得繁琐，好在react提供了官方的解决方案，具体做法：

方案对组件的shouldComponentUpdate进行了封装处理，实现对组件的当前属性和状态与上一次的进行浅对比，从而决定组件是否需要更新。

react在发展的不同阶段提供两套官方方案：

PureRenderMin
一种是基于ES5的React.createClass创建的组件，配合该形式下的mixins方式来组合PureRenderMixin提供的shouldComponentUpdate方法。当然用ES6创建的组件也能使用该方案。

从上面的截图可以看出，拆分后的组件性能有了上百倍的提升，虽然其中还包含一些其他优化，例如不将function在组件属性位置绑定this以及常量对象props缓存起来等避免每次re-render时重新生成新的function和新的对象props。

总的来说，对react组件进行拆分对react性能的提升是非常重要的，这也是react性能优化的一个方向。