react从零开始(四)

渲染列表数据
1、 map

在说渲染列表数据之前简单介绍一下map方法
在javascript中对象本质上是键值对的集合,但是传统的对象只能接受字符串作为键,而es6提供了map数据结构,虽然也是键值对的组合,但是"键"不受限于字符串,各种类型的值都能用来当做键。下面介绍一下map方法的使用

const map = new Map();
const = { methods:  "map是es6中的一种新方法"};

m.set('o', 'content');
m.get('o') //content

m.has('o' ) //true
m.delete('o')
m.has('o') //false

当然我们还可以传数组,如下:

const map = new Map([
[‘name’ , ‘es6map’],
[‘content’ , ‘键值数据结构更好’]
])

map.seize //2
map.has(‘name’) //true
map.get(‘name’) //es6map

map的实例属性和操作方法
map.size 返回Map结构的成员总数
map.set(key,value)设置键值对
map.get(key)方法获取值
map.has(key)判断某个键是否存在
map.delete(key)删除某个键
map.clear()清除所有的键值
遍历方法:
keys() 返回键名
values() 返回键值
entries()返回所有的成员
forEach()遍历所有的map成员

详细的可以去看一下阮一峰老师的es6

2、渲染数据列表
在react中渲染数据列表的时候使用的就是Map

render() {
    const users = [
      { username: 'Jerry', age: 21, gender: 'male' },
      { username: 'Tomy', age: 22, gender: 'male' },
      { username: 'Lily', age: 19, gender: 'female' },
      { username: 'Lucy', age: 20, gender: 'female' }
    ]
    const usersElements = [];  //*这儿是手动渲染的,在react中不用手动渲染*
    for (let user of users) {
      usersElements.push(
        <div>
          <div>姓名: {user.username}</div>
          <div>年龄: {user.age}</div>
          <div>性别: {user.gender}</div>
          <hr/>
        </div>
      )
    }
    return (
    <div>
        <h2>This is main content</h2>
        <button onClick={this.handleClickOnLikeButton.bind(this)}>
          {this.state.isLiked ? isLiked.likedText: isLiked.unLikedText}
        </button>
        {usersElements}
        {users.map((user) => {  //使用map直接渲染即可
          return <div>
          <div>姓名: {user.username}</div>
          <div>年龄: {user.age}</div>
          <div>性别: {user.gender}</div>
          <hr/>
          </div>   
        })}
    </div>
    )
    }

当然我们还可以把每个用户的渲染抽离出来做单独的组件,这儿就不介绍了
但是,这时候打开控制台会发现报错

这是因为对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。

{users.map((user, i) => {
          return <div key =  { i }>  //利用i作为唯一标识
            <div>姓名: {user.username}</div>
            <div>年龄: {user.age}</div>
            <div>性别: {user.gender}</div>
            <hr/>
          </div>   
        })}

我们只需要如上就可以避免报错

注: 主要跟随react小红书学习
附上小红书链接: http://huziketang.mangojuice.top/books/react/
若有更好学习建议,还请告知哈