Wie funktioniert die Kartenfunktion in React.js?

Question

ich nach dem ReactJS Tutorial von www.tutorialpoints.com und ich bin bei this page

In aller Kürze es die folgenden Daten im JSON-Format bietet:

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

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

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

und Schleifen mit die Karte Funktion unten:

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

Was nicht ich verstehen, warum sie ein Tupel mit (Person, i) jedes Objekt zum Ziel und wie ist die key = {i} Teil des Codes funktioniert. Ich habe versucht, den key Teil zu entfernen und der Code funktioniert immer noch. Aus weiterem Lesen habe ich verstanden, dass es hilft, nur die spezifischen Daten neu zu laden, die anstelle des gesamten Datensatzes geändert wurden, aber ich bin mir nicht sicher.

Kann jemand Zeile für Zeile NUR die Schleife in diesem Beispiel durchlaufen, um zu klären, wie das funktioniert?

Answer 1

Betrachten Sie Ihre .map() gibt 10 Artikel zurück. Wenn Sie eines der 10 Elemente ändern, sagen wir das fünfte Element, wird React nicht wissen, welches Element geändert werden soll, insbesondere ohne key. So wird es die gesamten Elemente der .map() wieder rendern.

Wenn Sie eine key angeben, wird das Element mit dieser key erneut gerendert, wobei die anderen 9 Elemente nicht gestört werden. Dies dient zur Verbesserung der Leistung.

[UPDATE]

Die key ist reserviert eindeutig ein Reagieren Element zu identifizieren. Es muss nicht i sein, es kann eine beliebige Zeichenfolge sein. Persönlich verwende ich shortid, um einen zufälligen eindeutigen Schlüssel zu erzeugen.

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

Reagieren Sie nicht hinzufügen, es wird Bezug ids (data-reactid) ist, wenn Sie ein Array von Elementen reagieren. Wenn Sie versuchen, das Array zu rendern, fügt React während der Normalisierung key an seine data-reactid an.

Array von Elementen ohne 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"> 

Array von Elementen mit 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"> 

Die Zahl nach $ ist der Schlüsselwert Sie zu dieser Komponente liefern. Dadurch kann React eine Komponente eindeutig identifizieren.

Neueste Version von React wird die data-reactid im DOM nicht freilegen.

Read this for better understanding