上面的列表组件中，this.state.items存放的是对象数组，为了更好的判断每项列表是否需要更新，可以将每个li列表项单独拆分为一个列表项组件，每个列表项相关的props就是items数组中的每个对象，这种扁平化数据很容易判断是否数据发生变化。

为了这篇文章专门写了一个有关添加展示Todo列表的事例库。克隆代码到本地可以在本地运行效果。

该事例库是一个有着5000项的Todo列表，可以删除和新增Todo项。该事例展示了组件拆分前和拆分后的体验对比情况，可以发现有性能明显的提升。

下面我们结合react的性能检测工具react-addons-perf来说明组件拆分的情况。

拆分前的组件TodosBeforeDivision的render部分内容如下：

onChange.state.items.map(el=>{ return ( item={el} tags]} deleteItem.

组件拆分前，输入框输入字符、增加todo或者删除todo项可以看出有明显的卡顿现象，如下图所示：

为了弄清楚是什么原因导致卡顿现象，我们使用chrome的devTool来定位，具体的做法是使用最新版的chrome浏览器的Performance选项来完成。先点击该选项中的record按钮开始记录，这时我们在组件输入框输入一个字符，然后点击stop来停止记录，我们会看到组件从输入开始到结束这段时间内的一个性能profile。

从图可以看出我们在输入单个字符时，输入框的input事件逻辑几乎占据整个响应时间，具体的处理逻辑主要是react层面的batchedUpdates方法批量更新列表组件，而不是用户自定义的逻辑。

那么，批量更新为啥占据这么多时间呢，为了搞清楚原因，我们借助基于react-addons-perf的chrome插件chrome-react-perf，它以chrome插件的形式输出分析的结果。

使用该插件需要注意一点的是：

chrome-react-perf插件的使用需要在项目中引入react-addons-perf模块，并必须将其对象挂载到window全局对象的Perf属性上，否则不能使用。

在devTool工具中选择Perf选项试图，点击start按钮后其变成stop按钮，在组件输入框中输入一个字符，然后点击Perf试图中的stop按钮，就会得出对应的性能试图。

上图提供的4个视图中，Print Wasted对分析性能最有帮组，它表示组件没有变化但是参与了更新过程，即浪费了re-render和vdom-diff这一过程，是毫无意义的过程。从图可以看出：TodosBeforeDivision和TodoItem组件分别浪费了167.88ms、144.47ms，这完全可以通过拆分组件避免的开销，这是react性能优化重点。

为此我们需要对TodosBeforeDivision组件进行拆分，拆分为一个带有input和button的动态组件AddTodoForm和一个相对静态的组件TodoList。二者分别继承React.PureComponent可以避免不必要的组件更新。

AddTodoForm ... render(){ return ( ..

其中TodoList组件还需要为每项Todo任务拆分为一个组件TodoItem，这样每个TodoItem组件的props对象为扁平化的数据，可以充分利用React.PureComponent来进行对象浅比较从而更好地决定组件是否要更新，这样避免了新增或者删除一个TodoItem项时，其他TodoItem组件不必更新。

TodoList ... render(){ return ( .TodoItem keyitemdeleteItem) } ... TodoItem ... render(){ return ( onClickx.span keytag) } ... }

这样拆分后的组件，在用上面的性能检测工具查看对应的效果：

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

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