React.js学习随笔一：列表渲染

在学校学习过Vue，现在所在公司使用react开发，现在还在学习中。。。实习生小白一枚，请大家指教。

React的特色就是使用JSX代替了原生的html+js的方式，将html结构放入js中一块开发。

react大量使用了ES6语法，所以学习时最好先熟悉es6。

在列表渲染中，vue使用它自定义的指令v-for对数据进行遍历和操作，react的区别在于，它和JQuery一样是js库，所以它直接调用js方法进行操作，常用的是map方法。

import "./list.css"
import React from 'react'

class List extends React.Component {        
    state=[
            {
                id:1,
                title:"第一条数据"
            },
            {
                id:2,
                title:"第二条数据"
            },
            {
                id:3,
                title:"第三条数据"
            },
            {
                id:4,
                title:"第四条数据"
            },
            {
                id:5,
                title:"第五条数据"
            },
            {
                id:6,
                title:"第六条数据"
            },
        ]
    constructor(){
        super();
    }
    render(){
        return(
            <ul className="list-block">
                {this.state.map(item => 
                <li key={item.id} className="list-item">{item.title}</li>)}
            </ul>
        )
    }
}
export default List;

其中的state与vuex的state也有些相似，二者都是保存数据的（状态即数据），而且还要通过一些特定的方法修改其中的数据，不能直接在其他地方直接修改。state应该是一个对象，但我定义成数组也没影响结果，有知道的大佬可以说一声，拜谢。

react的条件渲染使用一对单大括号。

上面的代码中，我在state中定义了许多组数据，在下面的jsx结构里直接调用map方法进行遍历。值得一提的是，react也推荐将要遍历渲染的元素添加一个唯一的key值（类似于vue中用v-bind绑定一个key）。否则浏览器会报出警告：

使用item的id作为key进行遍历后，将内容也渲染出来，最后的结果是：（css省略）