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.