React.js开发学习

本文简要记载作者学些React.js开发文档时的学习笔记。

如何构建一个React.js应用

案例来源于React.js的官方文档

并且官网有一个简单的案例视频介绍：think in react

在开始创建应用之前，需要设计应用原型和JSON API

1. 第一步：拆分用户界面为一个组件树；
2. 第二步：利用React，创建应用的一个静态版本；
3. 第三步：识别出最小的（但是完整的）代表UI的state；
4. 第四步：确认state的生命周期；
5. 第五步：添加反向数据流；

第一步：拆分用户界面为一个组件树

拆分的原则类似于创建函数和对象时所使用的技术，即单一功能原则，指的是，理想状态下一个组件应该只做一件事，假如它功能逐渐变大就需要被拆分成更小的子组件。

由经常需要将一个JSON数据模型展示给用户，因此需要检查模型结构是否正确以便（这里指组件结构）能够正确映射到模型上。这是因为用户界面和数据模型在信息构造方面都要一致。

第二步：利用React，创建一个应用的静态版本

根据组件树，选择从下至上来构建应用（简单应用采用从上至下较简单，大型项目采用从下至上更简单）

第三步：识别出最小的（完整的）代表UI的state

为了正确构建应用，首先需要考虑应用需要的最小的可变 state 数据模型集合。此处关键点在于精简：不要存储重复的数据。构造出绝对最小的满足应用需要的最小 state 是有必要的，并且计算出其它强烈需要的东西。例如，如果构建一个 TODO 列表，仅保存一个 TODO 列表项的数组，而不要保存另外一个指代数组长度的 state 变量。当想要渲染 TODO 列表项总数的时候，简单地取出 TODO 列表项数组的长度就可以了。

第四步：确认state的生命周期

React 中数据是沿着组件树从上到下单向流动的。可能不会立刻明白哪个组件应该拥有哪些 state 数据模型。这对新手通常是最难理解和最具挑战的，因此跟随以下步骤来弄清楚这点：

对于应用中的每一个 state 数据：

• 找出每一个基于那个 state 渲染界面的组件。
• 找出共同的祖先组件（某个单个的组件，在组件树中位于需要这个 state 的所有组件的上面）。
• 要么是共同的祖先组件，要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
• 如果找不出拥有这个 state 数据模型的合适的组件，创建一个新的组件来维护这个 state ，然后添加到组件树中，层级位于所有共同拥有者组件的上面。

第五步：添加反向数据流

前面构建了渲染正确的基于props和state的沿着组件树从上至下单项数据流动的应用。下面要做是让组件树中层级很深的表单组件更新父级组件中的state。