React.js 中的 map 函数是如何工作的？答案

【问题标题】：How does the map function work in React.js?React.js 中的 map 函数是如何工作的？
【发布时间】：2017-02-28 18:24:23
【问题描述】：

我正在关注来自 www.tutorialpoints.com 的 ReactJS 教程，我在 this page

简而言之，它以 JSON 格式提供以下数据：

this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },

            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },

            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }

并使用下面的 map 函数循环遍历它：

{this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}

我不明白的是为什么他们使用元组 (person, i) 来定位每个对象，以及代码的 key = {i} 部分是如何工作的。我试过删除key 部分，代码仍然有效。通过进一步阅读，我了解到它仅有助于重新加载已更改的特定数据而不是整个数据集，但我不确定。

任何人都可以逐行通过该示例中的循环来阐明其工作原理吗？

【问题讨论】：

标签： javascript dictionary reactjs key

【解决方案1】：

考虑您的 .map() 返回 10 个项目。当您更改 10 项中的一项时，例如第 5 项，React 将不知道要更改哪个元素，特别是没有key。因此，它将重新渲染.map() 的所有项目。

如果您提供 key，则带有 key 的元素将被重新渲染，而其他 9 个项目不受影响。这是为了提高性能。

[更新]

key 保留用于唯一标识 React 元素。它不需要是i，它可以是任何随机字符串。就个人而言，我使用shortid 来生成随机唯一密钥。

{this.state.data.map((person) => <TableRow key = {shortid.generate()} data = {person} />)}

当你有一个 React 元素数组时，React 不会添加它的引用 ids(data-reactid)。当您尝试渲染该数组时，React 将在规范化期间将您的 key 附加到它的 data-reactid 上。

没有key的元素数组

<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">

带有key的元素数组

<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$123" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$124" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$125" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$126" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$127" role="row">

$ 后面的数字是您提供给该组件的键值。这样，React 就可以唯一地标识一个组件。

最新版本的 React 不会在 DOM 中暴露 data-reactid。

Read this for better understanding

【讨论】：

我可以使用问题中提供的代码而不是{this.state.data.map(person => <TableRow data = {person} />)}，并且所有这些逻辑都将由 React 运行？ key 变量是否仅为特定目的而保留？您能否指导我看一个很容易在实际中看到的示例？
我看到您没有向 map 函数提供元组 (person, i)。是不是因为你有生成密钥的功能？
是的，我使用 shortid 生成随机字符串。我已经添加了链接。