接下来我们实现一个前端页面，基本需求如下：

1. 一个列表，包含所有商品的信息（名称，单位，单价，优惠信息），每个item可以加入购物车，并且可以选择加入购物车的商品数量。
2. 一个购物车页面，从列表页面可以进入购物车页面，购物车页面列出所有你选择的商品。
3. 确认购买后，将购物车内的信息传到后端。

今天先看第一个需求，商品列表。emmm...
我们可以把页面看成一个包含多个 Item 组件的 List 组件，至于Item中调整数量的部分，我们已经有 Counter 了，所以，主要任务就是实现 Item 组件，以及 ItemList 组件。

组件结构

我们的页面大致是这样：

商品列表组件 ItemList，其中包含多个 Item 组件，每个 Item 组件，用于显示单一商品信息，其中包含一个 Counter 组件。

先来写结构，大概还记得组件的嵌套吧？

新建 Item.js：

import React,{Component} from 'react';

class Item extends Component{
    render(){
        return(
            <div>
                Item
                <Counter />
            </div>
        )
    }
}

export default Item

新建 ItemList.js：

import React,{Component} from 'react';

class ItemList extends Component{
    render(){
        return(
            <div>
                ItemList
                <Item />
            </div>
        )
    }
}

export default ItemList

直接在 index.js 中将 ItemList 渲染到页面：

ReactDOM.render(<ItemList/>, document.getElementById('root'));

到此为止，ItemList 中包含了一个 Item，这个 Item 中又包含了一个 Counter：

列表

假设商品列表的数据，存放在 ItemList 中的一个数组当中：

const items = [
    {barcode: 'ITEM000000', name: '可口可乐', unit: '瓶', price: 3.00},
    {barcode: 'ITEM000001', name: '雪碧', unit: '瓶', price: 3.00},
    {barcode: 'ITEM000002', name: '苹果', unit: '斤', price: 5.50},
    {barcode: 'ITEM000003', name: '荔枝', unit: '斤', price: 15.00},
    {barcode: 'ITEM000004', name: '电池', unit: '个', price: 2.00},
    {barcode: 'ITEM000005', name: '方便面', unit: '袋', price: 4.50}
]

最直观的做法，构建6个 Item 组件，并分别将 name，unit，price 传入，Item 组件中接收传入的数据并显示。先来改写 Item 组件，通过 props 使用。
当然应该没有人会那么做吧……我们直接在 ItemList 中 构建列表，并给在构建每个子组件 Item 时通过属性设置 传入Item 对象，在 Item 组件中通过this.props.item.xxx使用传入的 item 的数据，以此构建出 JSX 元素。
先在 Item 组件中接收数据，并为元素添加上样式。

...
 render(){
    return(
        <div className="item">
            <div className="item-info">
                <span className="item-name">{this.props.item.name}</span>
                <span className="item-price"> 
                     {this.props.item.price}元/{this.props.item.unit}
                </span>
            </div>
            <Counter/>
        </div>
    )
}
...

给 Item 组件中加了默认值后的效果：

在 ItemList 组件中，你可以通过遍历，构建列表：

render(){
    var itemList = []
    for(let item of items){
        itemList.push(<Item item={item}/>)
    }
    return(
        {itemList}
    )
}

当然，也可以使用 ES6 的 map，看起来更加简洁：

render(){
    return(
        {items.map(item => (<Item item={item}/>)}
    )
}

上面的代码中，我们使用操作符 => 定义了一个临时函数，左边的括号中为输入的参数（单个 Item 对象），右边的花括号中是函数体，内容为对数据进行的操作以及返回值（对每个 Item 对象，返回一个 Item 组件实例）。

这两种创建列表方法的效果一致：

key

看起来还不错，但是，但是，但是，console 不高兴了。

unique "key"，emmm.... 既然你要，那就给你好了。

<Item item={item} key={item.barcode}/>

好了没有 Warning 了，问题解决，大快人心。

但是，
不是你要我加我就加的，那我岂不是很没面子。
为什么需要这样一个属性呢？

可以说，这个 unique key 和数据库中的 primary key 差不多，都是为了对数据进行 唯一标识。我们在给列表中的 子组件 设置 key 值的时候，尽量保证其唯一性，当然直接使用数据的 后台ID 是最好不过了。
一个 key 对应一个组件，当组件需要移动和组件之间需要交换的时候，也就是涉及到数组 动态变化 的时候，可以方便 React.js 快速找出列表中需要重新渲染的组件，来 避免重新渲染整个列表，节省开销。如你所见，这个属性 key 是 React.js 作为内部数据使用的，我们虽然把 key 传给了子组件，但是在子组件的内部，是无法通过 props 访问的。
不过，在商品列表的例子中，Item 数组中的数据仅仅用于展示，没有涉及到数组的变更，使用遍历中的 index 作为 key，也是没有问题的。

然后，我们再加上“优惠信息”，简单处理一下显示效果：

const promotions = [
    {
      type: 'BUY_TWO_GET_ONE_FREE', 
      barcodes: ['ITEM000000', 'ITEM000001', 'ITEM000005']
    }
]

...
getCommodityPromotions(barcode){
    let promotionsType = null;
    promotions.map(promotion => {
        if(promotion.barcodes.includes(barcode)){
            promotionsType = promotion.type === "BUY_TWO_GET_ONE_FREE" ? "【买二赠一】" : promotion.type
        }
    })
    return promotionsType
}

<Item ... promotion={this.getCommodityPromotions(item.barcode)}/>
...

在 Item 中通过 this.props.promotion 显示。再给 ItemList 加上标题，按钮，样式。丑是丑，但这个页面的基本元素已经完成的差不多了。

今天就到这里了。