我们知道React构建的应用都是由组件组成的，但是对于一个巨大的应用，那么如何把它拆分成一个个可重用的组件，对此React官方给出了以下的原则，帮助我们构建大型应用时需要怎么拆分组件，怎么样划分状态，什么时候添加反向数据流
从原型（mock）开始
大概可以根据设计师画出的图层来划分组件
将会用户界面拆分为组件树
可以按照以下原则对用户界面进行拆分
- 单一功能原则（即单一职责），指的是，理想状态下一个组件应该只做一件事，假如它功能逐渐变大就需要被拆分成更小的子组件
这就好像我们不能只写一个万能的对象
- 尝试把尽可能多的组件无状态化。这样做能隔离state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程
使用React，创建静态版本的应用
在简单的应用中，通常情况下从上（顶级组件开始）至下（最内部的组件）的方式更加简单；在大型的项目中，从下至上的方式更加简单，这样也可以在构建的同时写测试代码
识别出最小的（但是完整的）代表UI的state
可以使用以下三个问题来判断是否那个是属于state数据模型
- 是否是从父级通过 props 传入的？如果是，可能不是 state 。
- 是否会随着时间改变？如果不是，可能不是 state 。
- 能根据组件中其它 state 数据或者 props 计算出来吗？如果是，就不是state
确认state的生命周期
对于应用中的每一个 state 数据：
- 找出每一个基于那个 state 渲染界面的组件。
- 找出共同的祖先组件（某个单个的组件，在组件树中位于需要这个 state 的所有组件的上面）。
- 要么是共同的祖先组件，要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
- 如果找不出拥有这个 state 数据模型的合适的组件，创建一个新的组件来维护这个 state ，然后添加到组件树中，层级位于所有共同拥有者组件的上面。
添加反向数据流
如果需要实现数据双向绑定则需要添加反向数据流，React提供了一个叫做ReactLink的插件来使其和双向数据绑定一样方便