将设计好的UI划分为组件层级

依据单一功能原则判断组件范围。

UI与数据模型数据同构，一一对应。

用React创建静态版本

将渲染UI与添加交互这两个过程分开。静态版本就是一个不包含交互功能的UI，需要编写较多代码而无需考虑组件间的交互细节。

建议：

自下而上地构建应用，从最基本的组件开始编写。
只需要用到porps而不应该使用state。
只需要提供render()方法用于渲染。

确定UI state的最小且完整表示

设计理念： DRY(Don’t Repeat Yourself)

考虑每个组件中的所有数据，逐个检查数据是否属于state：

该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。

该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。

你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

确定state的放置位置

对于应用中的每一个state：

找到根据这个 state 进行渲染的所有组件。

找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。

该共同所有者组件或者比它层级更高的组件应该拥有该 state。

如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。

至此，完成了从上而下的数据流，此时state的值有顶层组件控制，用户对底层组件的操作无法改变其值。

添加反向数据流

因为用户的操作是对于底层的组件进行的，我们需要让数据反向传递：处于较低层级的表单组件更新较高层级组件的state。

这里涉及到onChange事件、回调函数、setState()。