React学习笔记12-循环渲染

import React, { Component } from 'react'

export default class App extends Component {
    constructor() {
        super()
        this.state = {
            list: [
                '1111',
                '2222',
                '3333'
            ]
        }
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map((item, index) =>
                        <li key={index}>{item}</li>
                    )}
                </ul>
                <button onClick={
                    () => {
                        this.state.list.push('4444')
                        this.setState({
                            list: this.state.list
                        })
                    }
                }>add</button>
            </div>
        )
    }
}
/* 
    为了列表的复用和重排，设置key值提高性能
    理想key，不重复的id
*/
/* 
     原生JS-map
*/

var list = ["aa", "bb", "cc"]

var newlist = list.map(item =>
    `<li>${item}</li>`
)
console.log(newlist)