React 理念
第一步:把 UI 划分出组件层级
例如 单一功能原则,在理想状况下,一个组件应该只做一件事情。如果这个组件功能不断丰富,它应该被分成更小的组件。
第二步:用 React 创建一个静态版本
最简单的方式是先创建一个静态版本:传入数据模型,渲染 UI 但没有任何交互。最好把这些过程解耦,因为创建一个静态版本更多需要的是码代码,不太需要逻辑思考,而添加交互则更多需要的是逻辑思考,不是码代码。
要构建一个用于呈现数据模型的静态版本的应用程序,你需要创建能够复用其他组件的组件,并通过 props 来传递数据。props 是一种从父级向子级传递数据的方法。如果你熟悉 state 的概念, 在创建静态版本的时候不要使用 state。State 只在交互的时候使用,即随时间变化的数据。由于这是静态版本的应用,你不需要使用它。
第三步:定义 UI 状态的最小(但完整)表示
为了正确构建你的应用,首先你需要考虑你的应用所需要的最小可变状态集。要点是 DRY:不要重复(Don’t Repeat Yourself)。找出应用程序的绝对最小表示并计算你所需要的其他任何请求。例如,如果你正在创建一个 TODO 列表,只要保存一个包含 TODO 事项的数组;不要为计数保留一个单独的状态变量。相反,当你想要渲染 TODO 计数时,只需要使用 TODO 数组的长度就可以了。
让我们来看看每一条,找出哪一个是 state。每个数据只要考虑三个问题:
- 它是通过 props 从父级传来的吗?如果是,他可能不是 state。
- 它随着时间推移不变吗?如果是,它可能不是 state。
- 你能够根据组件中任何其他的 state 或 props 把它计算出来吗?如果是,它不是 state