React 破冰之旅
列表和 key
列表和 key

界面上显示一个列表是非常常见的,React 中显示列表主要涉及到 JS 的 map 方法的使用,以及 React 自己的 key 的使用。

JS 的 map 方法

我们先来熟悉一下 JS 语言自带的 map 方法。

map 故名思议就是映射,映射就是一一对应。给定一个数组,执行它的 map 方法后,得到的还是一个元素数量相等的数组,同时新数组中的每一个元素跟老数组形成一一对应关系。

来看一个最简单的例子。

const a = [1, 2, 3]
const b = a.map(num => num * 2)
console.log(b)

给定一个数组 a ,每个元素是一个数字。我想要得到一个新的数组 b ,b 里面的每一个元素是 a 中对应元素的两倍。所以就可以调用数组的 map 方法,具体每个元素的转换规则,通过 map 的参数来指定。注意,这个参数不是一个普通的数据,而是一个回调函数,回调函数的参数是原数组中的当前元素,函数的返回值就是新数组中的对应元素。打印出 b 的值,发现果然是 [2, 4, 6]

这就是 JS 的 map 方法的基本使用方式了。

渲染列表

有了 map 方法,页面上渲染一个 List 就比较容易了。

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

const messages = ['hello', 'hi', 'how are you']

const List = props => {
  const { messages } = props

  const list = messages.map(t => <li>{t}</li>)
  return <ul>{list}</ul>
}

ReactDOM.render(<List messages={messages} />, document.getElementById('root'))

一个 messages 数组,里面有三个字符串。定义 List 组件,从属性中拿到 messages 。这里,map 的作用依然是对数组中的每一个元素进行一下转换,转换方式就是给每一个数据,对应我们这里就是每一个字符串添加上 html 标签,让它变成一个元素。这样,通过 map 就生成一个多元素组成的数组,我们把这样的数组叫元素数组,也就是这里的 list 。元素数组是可以在 JSX 中直接显示出来的。当然这里要注意,一个组件中不允许返回多个 dom 节点,所以要用 ul 标签包裹元素数组 list 。

浏览器中,看到列表显示正常。但是终端中有报错,原因是每一个列表条目都应该有一个独一无二的 key 。

key

key 对 JSX 的列表非常重要,因为 React 要通过元素的 key ,去定位这个元素,以便去删除或者修改这个元素。所以 key 必须是要独一无二的,同时 key 必须是固定的,不能变来变去。

这里直观的思路是用数组的 index 值去做 key ,这样可以做到独一无二,但是问题是如果数组增删了元素,一些元素的 index 就会变,所以用 index 做 key 值是不推荐的。而实际中,数据从数据库中读出来之后一般都自带独一无二,终身不变的 id 值,把数据的 id 作为 key 是非常常见的做法。

import React from 'react'
import ReactDOM from 'react-dom'

const messages = [
  {
    id: 1,
    text: 'React'
  },
  {
    id: 2,
    text: 'Re: React'
  },
  {
    id: 3,
    text: 'Re:Re: React'
  }
]

const List = props => {
  const { messages } = props

  const list = messages.map(t => <li key={t.id}>{t.text}</li>)
  return <ul>{list}</ul>
}

ReactDOM.render(<List messages={messages} />, document.getElementById('root'))

所以咱们这里也把字符串数组改写成对象数组,来把 id 配上。下面 List 组件中,用 id 做 key 即可。浏览器中可以看到,报错没有了。

关于 Key 的介绍,就到这里了。更多的一些使用细节可以参考官方文档:https://reactjs.org/docs/lists-and-keys.html

总结

本节介绍了 React 中如何去显示列表,主要由这么几个重要的知识点:首先,map 方法可以把纯数据数组,转换成元素数组,而元素数组是可以直接在 JSX 中进行渲染的。其次,JSX 语法要求,一个组件不能返回多个 DOM 节点,所以必要的时候要给元素数组外面再包裹一层标签。第三,渲染列表的时候,每一个列表项要有 key ,key 的选取要满足两大原则,独一无二和永远不变。