构建一个 React 组件的步骤

参考资料

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

首先，需要在设计稿上用方框圈出每一个组件（包括其子组件），并以合适的名称命名。

以单一功能原则来判定组件的范围：一个组件原则上只能负责一个功能，如果他需要负责更多的功能，这时候就应该考虑将它拆分为更小的组件。

在实际工作中，向用户展示的 JSON 数据模型，如果 UI 划分的或者说设计的恰当，UI 组件结构便会与数据模型一一对应，这是因为 UI 和数据模型都会倾向于遵守相投的 结构，将 UI 分离为组件，其中每个组件需要与数据模型的某个部分匹配。

用 React 创建一个静态版本

使用已有的数据，或者自己编写符合设计稿的数据，渲染一个不包含交互功能的 UI。

最好将渲染 UI 和添加交互这两个过程分开：

1. 编写一个应用的静态版本时，需要大量代码，而不需要太多细节交互；
2. 添加交互功能时，则需要考虑大量细节，而不需要太多代码。

所以将这两个过程分开进行更为合适。

组件的state应该表示 一个 UI 组件 变化的数据，应当仅在实现交互时使用，而不是在构造静态版本时使用到。

顺序：

1. 自上而下构建应用：最先编写层级高，或者是外围的组件，从大的框架，详细丰富到内部的小组件。
2. 自下而上构建应用：先从最基本的（elementary）元素开始编写，比如某个按钮，某一行。

确定 UI state 最小（且完整）表示[描述方式]

==Don`t Repeat Yourself== 是这一步的关键词。

通过问自己下面三个问题，可以逐步检查相应数据是否属于 state：

1. 该数据是否是父组件通过 props 传递而来？如果是，那它应该不是 state。
2. 该数据是否随时间推移而保持不变？如果是，那它应该也不是 state
3. 能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

确定 state 放置的位置

对于应用中的每一个 state：

• 找到根据这个 state 进行渲染的所有组件
• 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
• 该共同所有者组件或比它层级更高的组件应该拥有该 state。
• 如果找不到一个合适的位置存放该 state，可以创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。

添加反向数据流

React 通过一种比传统的双向绑定略微繁琐的方式来实现反向数据的传递。

如果我们需要改变某一个 state，我们只能在该 state 的所有者组件中修改它。当把 state 传给子组件的时候，如果想在子组件中修改这个 state 数据，就要通过 props 传递一个修改state的回调函数给同样的子组件。