简单的APP创建思路
第一步：将UI按照结构分解为组件
划分组件时遵循[单一功能原则][1]。
将划分好的组件按照结构列出来。
第二步：编写静态的无交互版本
在编写静态版本时不要使用state，state是为交互准备的。
写组件时可以自顶向下也可以自底向上，项目的解构简单时自顶向下通常会比较简单，项目复杂度增加时采用自底向上比较简单，并且可以边写边测试。
第三步：确定交互所需要的属性
对于备选的属性做如下筛选：
- 它是通过
props从父组件传入的吗？如果是，那么它不应该被加入state。
1. 它是保持不变的吗？如果是，那么它不应该被加入state。
1. 你可以从组件的state或props中计算得到它吗？如果是，那么它不应该被加入state。
关键点：属性不要重复。
第四步：确定state应该位于哪个组件
对于第三步选出的每一个属性：
- 找出所有基于这个属性做出相应渲染的组件。
- 找出这些组件的一个公共父组件。
-
state应该位于这个父组件或者更高一层的组件。 - 如果没有这么一个组件那么就创建一个新的组件来存放
state，然后将它加入组件结构，作为公共父组件或者更高一层的组件。
第五步：添加反向的数据流
从嵌套在深层的组件更新浅层组件的state。
[1]: https://zh.wikipedia.org/wiki/%E5%8D%95%E4%B8%80%E5%8A%9F%E8%83%BD%E5%8E%9F%E5%88%99
网友评论