Question

我正在关注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"
            }
         ]
      }

并使用下面的地图功能循环播放它：

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

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

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

Answer 1

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

的所有项目

如果您提供key，则key的元素将重新呈现，其他9个项目不受干扰。这是为了提高性能。

<强> [UPDATE]

保留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

地图功能如何在React.js中运行？

1 个答案: