需要的功能，接收用户输入，展示用户筛选结果，展示详细数据
FilterableProductTable(橙色):是整个示例应用的整体SearchBar(蓝色):接受所有的用户输入ProductTable(绿色):展示数据内容并根据用户输入筛选结果ProductCategoryRow(天蓝色):为每一个产品类别展示标题ProductRow(红色):每一行展示一个产品
FilterableProductTableSearchBarProductTableProductCategoryRowProductRow
实现思路，是先用已有的数据模型渲染一个不包含交互功能的 UI。最好将渲染 UI 和添加交互这两个过程分开。
组件构建顺序，简单应用：自上而下意味着首先编写层级较高的组件，复杂：自下而上意味着从最基本的组件开始编写
静态实现考察的是css布局的能力
交互实现更能体现自己react的熟练程度
我们需要找出应用所需的 state 的最小表示，首先分析我们的数据：
- 包含所有产品的原始列表
- 用户输入的搜索词
- 复选框是否选中的值
- 经过搜索筛选的产品列表
接下来需要考虑
- 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
- 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
- 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
然后我们可以逐步分析，原始列表明显是传递而来的，搜索词和复选框是state，而经过搜索筛选的列表可以通过计算得到
state的来源解决了，接下来需要考虑state应该放在那里
React 中的数据流是单向的，并顺着组件层级从上往下传递，下面是一些策略
- 找到根据这个 state 进行渲染的所有组件。
- 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
- 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
- 如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。
然后根据策略得到的结果
ProductTable需要根据 state 筛选产品列表。SearchBar需要展示搜索词和复选框的状态。- 他们的共同所有者是
FilterableProductTable。 - 因此，搜索词和复选框的值应该很自然地存放在
FilterableProductTable组件中。
最后利用反向数据流来改变state，从而实现交互
我们需要改变 state 来反映用户的当前输入。由于 state 只能由拥有它们的组件进行更改，FilterableProductTable 必须将一个能够触发 state 改变的回调函数（callback）传递给 SearchBar。我们可以使用输入框的 onChange 事件来监视用户输入的变化，并通知 FilterableProductTable 传递给 SearchBar 的回调函数。然后该回调函数将调用 setState()，从而更新应用。
子组件方法获取修改值，调用父组件传递的回调函数传递过去