设计原则
把UI拆分为一个组件的层级
但是你如何知道什么东西应该是独立的组件？只需在你创建一个函数或者对象时，根据是否使用过相同技术来做决定。一种这样的技术是单一功能原则（single responsibility principle），也就是一个组件在理想情况下只做一件事情。如果它最终增长了，它就应该被分解为更小的组件。
例如：
- FilterableProductTable
- SearchBar
- ProductTable
- ProductCategoryRow
- ProductRow
用React创建一个静态版本
要构建一个静态版本 app 来渲染你的数据模型，你将会想到构建一个重用其它组件并利用 props 传递数据的组件。props 是一种从父级传递数据到子级的方式。
确定最小（但完备）的 UI state 表达
要正确的构建你的 app，你首先需要思考你的 app 需要的可变 state 的最小组。这里的关键是 DRY 原则：Don't Repeat Yourself(不要重复自己)。想出哪些是你的应用需要的绝对最小 state 表达，并按需计算其他任何数据。
让我们逐个检查出哪一个是state，只需要简单地问以下三个问题:
- 它是通过props从父级传递来的吗？如果是，它可能不是 state。
- 它随时间变化吗？如果不是,它可能不是 state。
- 你能基于其他任何组件里的 state 或者 props 计算出它吗？如果是,它可能不是state.
确定你的 state 应该存在于哪里
记住：React 总是在组件层级中单向数据流动的。
对于你的应用里每一个数据块：
- 确定哪些组件要基于 state 来渲染内容。
- 找到一个共同的拥有者组件（在所有需要这个state组件的层次之上，找出共有的单一组件）。
- 要么是共同拥有者，要么是其他在层级里更高级的组件应该拥有这个state。
- 如果你不能找到一个组件让其可以有意义地拥有这个 state，可以简单地创建一个新的组件 hold 住这个state，并把它添加到比共同拥有者组件更高的层级上。