1.先仔细观察,把UI分成组件层级。
2.创建静态版本,创建静态版本就是码代码,不需要太多的逻辑。可以采用自顶向下或者自底向上的方法。一般自顶向下会方便一些,但是大型项目会采用自顶向下,方便单元测试,当然采用哪种看自己的习惯。
3.定义UI状态的最小表示,思考为了使你的UI交互,你需要触发对底层数据模型的更改。React使用state,找出那个一个是state,每个数据需要考虑以下三个问题:
a.它是通过props从父级传来的吗?如果是,他可能不是state.
b.它随着时间推移不变吗?如果是,他可能不是state
c.你能根据组件中任何其他的state或props把它计算出来吗?如果是,它不是state.
4.找到你的state位于哪里。记住React中的数据流是单向的,并在组件层次结构中向下传递。不清楚哪个组件拥有state可以按照下面的步骤来辨别:
a.确定每一个需要这个state来渲染的组件。
b.找到一个公共所有者组件(一个层级商行高于所有其他需要这个state的组件的组件)
c.这个公共所有者组件或另一个层级更高的组件应该拥有这个state。
d.如果你没有找到可以拥有这个state的组件,创建一个仅用来曹村状态的组件并把它加入逼这个公共所有者组件层级更高的地方。
5.添加反向数据流。React的数据流很明显,让你可以很轻松的了解你的程序如何运行的,但相较于传统的双向绑定,他的代码量会稍微多一点。