React.js开发学习
本文简要记载作者学些React.js开发文档时的学习笔记。
如何构建一个React.js应用
案例来源于React.js的官方文档
并且官网有一个简单的案例视频介绍：think in react
在开始创建应用之前，需要设计应用原型和JSON API
- 第一步：拆分用户界面为一个组件树；
- 第二步：利用React，创建应用的一个静态版本；
- 第三步：识别出最小的（但是完整的）代表UI的state；
- 第四步：确认state的生命周期；
- 第五步：添加反向数据流；
第一步：拆分用户界面为一个组件树
拆分的原则类似于创建函数和对象时所使用的技术，即单一功能原则，指的是，理想状态下一个组件应该只做一件事，假如它功能逐渐变大就需要被拆分成更小的子组件。
由经常需要将一个JSON数据模型展示给用户，因此需要检查模型结构是否正确以便（这里指组件结构）能够正确映射到模型上。这是因为用户界面和数据模型在信息构造方面都要一致。
第二步：利用React，创建一个应用的静态版本
根据组件树，选择从下至上来构建应用（简单应用采用从上至下较简单，大型项目采用从下至上更简单）
第三步：识别出最小的（完整的）代表UI的state
为了正确构建应用，首先需要考虑应用需要的最小的可变 state 数据模型集合。此处关键点在于精简：不要存储重复的数据。构造出绝对最小的满足应用需要的最小 state 是有必要的，并且计算出其它强烈需要的东西。例如，如果构建一个 TODO 列表，仅保存一个 TODO 列表项的数组，而不要保存另外一个指代数组长度的 state 变量。当想要渲染 TODO 列表项总数的时候，简单地取出 TODO 列表项数组的长度就可以了。
第四步：确认state的生命周期
React 中数据是沿着组件树从上到下单向流动的。可能不会立刻明白哪个组件应该拥有哪些 state 数据模型。这对新手通常是最难理解和最具挑战的，因此跟随以下步骤来弄清楚这点：
对于应用中的每一个 state 数据：
- 找出每一个基于那个 state 渲染界面的组件。
- 找出共同的祖先组件（某个单个的组件，在组件树中位于需要这个 state 的所有组件的上面）。
- 要么是共同的祖先组件，要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
- 如果找不出拥有这个 state 数据模型的合适的组件，创建一个新的组件来维护这个 state ，然后添加到组件树中，层级位于所有共同拥有者组件的上面。
第五步：添加反向数据流
前面构建了渲染正确的基于props和state的沿着组件树从上至下单项数据流动的应用。下面要做是让组件树中层级很深的表单组件更新父级组件中的state。