Day14 用React Component去规划整个画面

今天要学习如何用React的Component的概念来设计你的UI画面，下面用React官网提供的素材作举例:

1. 根据上图，并透过接收产品订单的API得到下列资料:

[
  {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"}
];

2. 将 UI 拆解成 component 层级
   接下来，依照每个区块的UI逻辑或是以Layout的观念去规划React Components，若按照单一职责的概念规划的话，让每一个Component只处理一个功能或代表一个架构，如果这个Component将来因为需求改变而变得更大、更复杂时，就可以把它拆成数个更小的subcomponent。用此观念去拆解上图後，用5个Component去展示该图:
   

• FilterableProductTable（橘色）： 包含整个范例(框架外框)
• SearchBar（蓝色）： 接收使用者输入的资料，并以此资料做筛选(搜寻框)
• ProductTable（绿色）： 展示并过滤使用者输入的资料(产品标题名称)
• ProductCategoryRow（土耳其蓝色）： 类别名称
• ProductRow（红色）： 个别产品
  以Layout层级来说，呈现如下:
  FilterableProductTable
  SearchBar
  ProductTable
  ProductCategoryRow
  ProductRow

3. 在 React中建立纯静态的切排画面
   简单建立一个静态资料模型，透过前天学到的Conposition的概念组合Components，使用Props传递资料，因State是用来带互动性资料的，故此处不用state的方法来建立模型。建立的方式可以从最外层(FilterableProductTable)开始，会比较符合过去用HTML时切排的观念。
   4.找出最少（但完整）的 UI State 的代表
   使用React State的方式带入资料，将上面建立好的静态模型变为可互动(动态变化)的UI。检视目前程序所有的资料来源，并找出最小的变动单位。上述例子中，可以整理出4个资料:

• 原本的产品列表
• 使用者输入的搜寻关键字
• checkbox 的值
• 筛选过後的产品列表
  并用下列三种方式去排除:

1. 资料是否为从外部传递来的
2. 资料是否恒久不变
3. 是否能透过其他Compontent去取得这份资料

最终，我们可以得出使用者输入的搜寻关键字和checkbox的值为state的资料来源。
5.找出你的 State 应该在哪里
了解哪些资料作为State後，再来需要找出哪些Component拥有这些State。
State设定参考依据:

• 指出每个根据 state 来 render 某些东西的 component。
• 找出一个共同拥有者 component（在层级中单一一个需要 state 的、在所有的 component 之上的 component）。
• 应该拥有 state 的会是共同拥有者 component 或另一个更高层级的 component。
• 如果你找不出一个应该拥有 state 的 component 的话，那就建立一个新的 component 来保持 state，并把它加到层级中共同拥有者 component 之上的某处。
  原本读到这边有点雾煞煞的，但以HTML架构的观念去思考，关键字和checkbox的state(资料)会显示於父层元素SearchBar，ProductTable会根据关键字和checkbox的state(资料)去产生列表，这两个Component的共通Component为FilterableProductTable，state(资料)便可设在其上。
  6.加入相反的资料流
  最後，更新最外层的Component，也就是FilterableProductTable的state，将资料带给下方的SearchBar和ProductTable来筛选出对应的值。