React 理念

React 理念

第一步：把 UI 划分出组件层级

例如 单一功能原则，在理想状况下，一个组件应该只做一件事情。如果这个组件功能不断丰富，它应该被分成更小的组件。

第二步：用 React 创建一个静态版本

最简单的方式是先创建一个静态版本：传入数据模型，渲染 UI 但没有任何交互。最好把这些过程解耦，因为创建一个静态版本更多需要的是码代码，不太需要逻辑思考，而添加交互则更多需要的是逻辑思考，不是码代码。

要构建一个用于呈现数据模型的静态版本的应用程序，你需要创建能够复用其他组件的组件，并通过 props 来传递数据。props 是一种从父级向子级传递数据的方法。如果你熟悉 state 的概念， 在创建静态版本的时候不要使用 state。State 只在交互的时候使用，即随时间变化的数据。由于这是静态版本的应用，你不需要使用它。

第三步：定义 UI 状态的最小(但完整)表示

为了正确构建你的应用，首先你需要考虑你的应用所需要的最小可变状态集。要点是 DRY：不要重复(Don’t Repeat Yourself)。找出应用程序的绝对最小表示并计算你所需要的其他任何请求。例如，如果你正在创建一个 TODO 列表，只要保存一个包含 TODO 事项的数组；不要为计数保留一个单独的状态变量。相反，当你想要渲染 TODO 计数时，只需要使用 TODO 数组的长度就可以了。

让我们来看看每一条，找出哪一个是 state。每个数据只要考虑三个问题：

1. 它是通过 props 从父级传来的吗？如果是，他可能不是 state。
2. 它随着时间推移不变吗？如果是，它可能不是 state。
3. 你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state

第四步：确定你的 State 应该位于哪里