Reactjs 性能优化，系列一

引言

ReactJs是Facebook开发的一个前端库，介绍ReactJs的文章很多，也可以去ReactJs的主页查看官方文档，文档的内容很少，示例也很详细。

Flux是基于的Reactjs的不能算作前端框架的前端框架，Flux并不提供一个完整的前端框架，只是提供一个Reactjs前端的实现，事实上就是推荐一套应用结构，而不提供具体实现。

前文

在结构复杂的ReactJs Application中，其结构往往都是基于树形结构, 类似与：

                         ------------- App Component ---------------  
                         |             |              |            |  
                         |             |              |            |  
                      Message       Project        Other          ...  
                         |             |              |  
                       ------         ------         ------  
                       |    |         |    |         |    |  

在App Component中通常我们会有

在上面的示例代码中，App Component 去监听AppStore的改变，然后在onChange中去改变App Component的state。比如当我执行AppActionCreator.showMessage('Show a Message')的时候，App Component就触发onChange方法改变state,这个时候就会触发render方法，将state的值向下传递，这时候整个应用都会沿着上面的树形结构一级一级向下执行render方法，这个是个不合理的情况，整个App都重新渲染的话，造成性能的消耗，虽然React有virtual DOM 来优化性能，但是这种做法可以在代码层面进行优化。

优化

对于一个Component来说应该只保存自己需要的状态，而且应该管理自己的状态，上面的例子中，App Component接受了Message Component的状态在通过自身的state改变传递给Message Component. 但是Message Component应该管理自身的状态(显示，显示内容)。

在Message Component中实现监听Message Component相关的数据变更，这时当触发AppActionCreator.showMessage('Show a Message') 方法的时候，所有的状态改变只会发生在Message Component内部，也只会传递给他的所有Children Component.

结论

Component是React中的组件，一个Component可以包含另外其他的Component, 但是同样的父级的状态变更也会传递给所有子级。所以降低Component间的耦合性很重要。
上面的Message Component的state改变仍然会传递给其所有子级，下一篇将会介绍如何最小程度减少Component 的render.