map函数如何在React.js中工作? [英] How does the map function work in React.js?

问题描述

我正在关注来自www.tutorialpoints.com的ReactJS教程，并且我位于此页面

I'm following the ReactJS tutorial from www.tutorialpoints.com and I'm at this page

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

In a nutshell it provides the following data in JSON format:

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

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

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

，并使用下面的地图功能遍历它:

and is looping through it with the map function below:

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

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

What I fail to understand is why are they using a tuple (person, i) to target EACH object and how is the key = {i} part of the code working. I have tried removing the key part and the code still works. From further reading I understood that it helps reload only the specific data that has been changed instead of the whole dataset, but I'm not sure.

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

Can anyone go through ONLY the loop in that example line by line to clarify how this works?

推荐答案

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

Consider your .map() returns 10 items. When you change one of the 10 item, say 5th item, React won't know which element to change in particular without the key. So, it will re-render the entire items of the .map().

如果提供key，具有该key的元素将被重新渲染，而其他9个项目则不受干扰.这是为了提高性能.

If you provide a key, the element with that key will be re-renders leaving the other 9 items undisturbed. This is to improve performance.

[UPDATE]

key被保留以唯一地标识React元素.它不必是i，它可以是任何随机字符串.我个人使用 shortid 生成随机唯一密钥.

The key is reserved to identify an React element uniquely. It don't need to be i, it can be any random string. Personally, I use shortid to generate random unique key.

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

当您有一个React元素数组时，

React不会添加它的引用ids(data-reactid).当您尝试渲染该数组时，React将在规范化过程中将key追加到其data-reactid上.

React won't add it's reference ids(data-reactid) when you have a array of React elements. When you try to render that array, React will append your key to its data-reactid during normalization.

不含key

Array of elements without 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

Array of elements withkey

<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可以唯一地标识组件.

The number after $ is the key value you supply to that component. By this, React can uniquely identify a component.

最新版本的React不会在DOM中公开data-reactid.

Latest version of React won't expose the data-reactid in the DOM.

请阅读以下内容以取得更好的效果理解

这篇关于map函数如何在React.js中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！