需求
功能：
- 通过用户输入，可以过滤列表内容
- 通过单选框可以过滤没有库存的情况
- 列表头显示
Name、Price两列 - 区分分组信息
- 每组显示组内列表
- 没有库存的商品特殊显示
设计原型：
需求
服务端返回Json：
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];
分析
使用 Jquery 思路分析
对 Jquery 掌握不深，简单做分析: Jquery 是一门对Dom操作的艺术，我的理解是，Dom就是 Jquery 的数据库。
-
通过用户输入，可以过滤列表内容
- 需要一个
input[type=text]的表单项 - 在列表的DOM中设置
data-name商品名称 - 用户输入的内容触发
onChange事件，遍历Dom的data-name隐藏/显示匹配的内容
- 需要一个
-
通过单选框显示隐藏没有库存内容
- Dom设置
data-stock:
- 需要一个
input[type=redio]的表单项 - 在列表的Dom中设计
data-stock的值 - 用户点击Redio触发
onClick/onChage事件，遍历Domdata-stock隐藏显示/匹配内容
- Class设置
no-stock:
-
no-stock设置特殊样式 - 用户点击Redio时，设置
no-stock的display: none/block来控制没有库存情况
- Dom设置
-
列表头显示
Name、Price两列- Html输出
-
区分分组信息，每组显示组内列表
- 处理服务端返回Json，
category内容显示成head - 相同
category以列表形式显示 - 设置
data-name等于name - 设置
no-stock的Name样色为red
- 处理服务端返回Json，
使用 React 思路分析
分解
初学 React ，简单分析：React 是一门操作组件的艺术，React 操作内存中的数据，通过对新旧数据的判断生成Dom，React 不在局限于Dom本身，将数据处理权交给js。
├── FilterableProductTable # （橘色）： 包含整个例子的容器
├── SearchBar # （蓝色）： 接受所有 用户输入（ user input ）
├── ProductTable # （绿色）： 根据 用户输入（ user input ） 过滤和展示 数据集合（ data collection ）
│ ├── ProductCategoryRow # （青色）： 为每个 分类（ category ） 展示一列表头
│ ├── ProductRow # （红色）： 为每个 产品（ product ） 展示一列
搭建静态模板
- 输入组件
- 表格组件
-
category展示组件 - 列表组件
通过对 Json 数据的处理，向组件发送数据
设计 State
首先我们要了解
State的设计原则
- 是否是从父级通过
props传入的？如果是，可能不是state。
- 可以通过外部传入的数据，不应该使用
state管理
- 是否会随着时间改变？如果不是，可能不是
state。
- 不会改变的数据，不应该使用
state管理
- 能根据组件中其它
state数据或者props计算出来吗？如果是，就不是state。
- 能够通过
props计算出来的不应该使用state管理
对于应用中的每一个 state 数据：
- 找出每一个基于那个 state 渲染界面的组件。
- 找出共同的祖先组件（某个单个的组件，在组件树中位于需要这个 state 的所有组件的上面）。
- 要么是共同的祖先组件，要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
- 如果找不出拥有这个 state 数据模型的合适的组件，创建一个新的组件来维护这个 state ，然后添加到组件树中，层级位于所有共同拥有者组件的上面。
-
FilterableProductTable：作为总控层-
state.filterText：记录搜索内容 -
state.stocked：记录是否选择过滤没有库存 -
products：记录展示数据
-
SearchBar：向FilterableProductTable提供更新state.filterText与state.stocked的方法-
ProductTable：判断state.filterText与state.stocked的值，处理出需要显示的列表内容-
ProductCategoryRow：显示组名 -
ProductRow：遍历显示出组下的列表
-
每层组件都处理自己分内的事情，父级组件向子集组件提供需要由子集组件处理的数据。
顶层组件作为总控制，控制所有数据的变化，并向子集组件发送数据
