将设计好的 UI 划分为组件层级
首先，需要在设计稿上用方框圈出每一个组件（包括其子组件），并以合适的名称命名。
以单一功能原则来判定组件的范围：一个组件原则上只能负责一个功能，如果他需要负责更多的功能，这时候就应该考虑将它拆分为更小的组件。
在实际工作中，向用户展示的 JSON 数据模型，如果 UI 划分的或者说设计的恰当，UI 组件结构便会与数据模型一一对应，这是因为 UI 和数据模型都会倾向于遵守相投的 结构，将 UI 分离为组件，其中每个组件需要与数据模型的某个部分匹配。
用 React 创建一个静态版本
使用已有的数据，或者自己编写符合设计稿的数据，渲染一个不包含交互功能的 UI。
最好将渲染 UI 和添加交互这两个过程分开：
- 编写一个应用的静态版本时，需要大量代码，而不需要太多细节交互；
- 添加交互功能时，则需要考虑大量细节，而不需要太多代码。
所以将这两个过程分开进行更为合适。
组件的state应该表示 一个 UI 组件 变化的数据，应当仅在实现交互时使用，而不是在构造静态版本时使用到。
顺序：
- 自上而下构建应用：最先编写层级高，或者是外围的组件，从大的框架，详细丰富到内部的小组件。
- 自下而上构建应用：先从最基本的（elementary）元素开始编写，比如某个按钮，某一行。
确定 UI state 最小（且完整）表示[描述方式]
==Don`t Repeat Yourself== 是这一步的关键词。
通过问自己下面三个问题，可以逐步检查相应数据是否属于 state：
- 该数据是否是父组件通过 props 传递而来？如果是，那它应该不是 state。
- 该数据是否随时间推移而保持不变？如果是，那它应该也不是 state
- 能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
确定 state 放置的位置
对于应用中的每一个 state：
- 找到根据这个 state 进行渲染的所有组件
- 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
- 该共同所有者组件或比它层级更高的组件应该拥有该 state。
- 如果找不到一个合适的位置存放该 state，可以创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。
添加反向数据流
React 通过一种比传统的双向绑定略微繁琐的方式来实现反向数据的传递。
如果我们需要改变某一个 state，我们只能在该 state 的所有者组件中修改它。当把 state 传给子组件的时候，如果想在子组件中修改这个 state 数据，就要通过 props 传递一个修改state的回调函数给同样的子组件。
网友评论