React实现原型图的过程

抽取组件的步骤：
1、列出原型图需要的每一条数据
2、标记出哪一些是state，哪一些不是
2.1 随着时间推移保持不变的？不是state（常量）
2.2 通过props从父组件传递？ 不是state (props)
2.3 是否可以基于已存在于组件中的state或者props进行计算？ 不是state （computed，写在初始化部分代码）

3、验证state应该被放置在哪里
*在验证你应用程序的最小state数据之后，你需要验证哪个组件是通过改变state实现可响应的，或者拥有这个state。记住：React使用单向数据流，通过组件层级结构从父组件传递至子组件。要搞清楚哪个组件拥有哪个state。
为你的应用程序的每一个state：
1、验证每一个基于特定state渲染的组件
2、你也可以将state放置于他们父组件上层的组件
3、如果你找不到一个有意义拥有这个state的地方，单独创建一个新的组件去管理这个state，并将它添加到它们父组件上层的某个地方。
4、为这个 state 贯彻我们的策略
1、验证使用state的组件
*ProductTable需要基于state（搜索和复选框值）过滤产品列表
*SearchBar需要展示state（搜索和复选框值）
2、寻找它们的父组件：他们的第一个共同父组件为：FilterableProductTable
3、决定state放置的地方：我们将放置过滤文本和勾选state的值于FilterableProductTable中
5、添加反向数据流
SearchBar中的change事件改变时，通过抛出事件到父组件中改变state，从而触发更新ProductTable和SearchBar的响应式。