列表:
	React通过  {arr} 在jsx内部构建一个元素集合

	arr -> 装了一堆react元素

	每个人需要一个key, 一般都是后台传过来id
		a). key只要确保是唯一， Math.random()
		b). 索引

<script type="text/babel">
    //let {Component} = React;
    let Component = React.Component;
    class Demo extends Component{
        constructor(){
            super();

            this.state={
                arr:['apple','banana','orange','pear']
            };
        }
        render(){
            let arr = [];
            this.state.arr.forEach((v,i)=>{
                arr.push(<li key={i}>{v}</li>);
            });

            return (<ul>
                {arr}
            </ul>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    //let {Component} = React;
    let Component = React.Component;
    class Demo extends Component{
        constructor(){
            super();

            this.state={
                arr:['apple','banana','orange','pear']
            };
        }
        render(){
            let arr = this.state.arr.map((val,index)=><li key={index}>{val}</li>)

            return (<ul>
                {arr}
            </ul>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    //let {Component} = React;
    let Component = React.Component;
    class Demo extends Component{
        constructor(){
            super();

            this.state={
                arr:['apple','banana','orange','pear']
            };
        }
        render(){
            let arr = this.state.arr.map((val,index)=>
                (
                    <li key={index}>
                        <strong>{val}</strong>
                    </li>
                )
            )

            return (<ul>
                {arr}
            </ul>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    //let {Component} = React;
    let Component = React.Component;

    const ListItem =({value}) => <li>{value}</li>;

    class Demo extends Component{
        constructor(){
            super();

            this.state={
                arr:['apple','banana','orange','pear']
            };
        }
        render(){
            let arr = this.state.arr.map((val,index)=><ListItem key={index} value={val} />)

            return (<ul>
                {arr}
            </ul>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>