マップ機能はReact.jsではどのように機能しますか？

Question

私はwww.tutorialpoints.comからReactJSチュートリアルを以下だし、私はそれがJSON形式で次のデータ提供一言で言えばthis page

でよ：

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} />)} 

私が理解できないのはなぜ彼らはそれぞれのオブジェクトを対象とするタプル（人物、i）を使用していて、どのようにはですコードの一部が機能しています。 key部分を削除しようとしましたが、コードはまだ動作しています。さらに読むことで、データセット全体の代わりに変更された特定のデータだけをリロードするのに役立つと理解しましたが、わかりません。

誰かがこの例のループを1行ずつ実行して、この動作の仕組みを明確にすることはできますか？

Answer 1

あなたの.map()が10個を返すと考えてください。 10アイテムのうちの1つ、たとえば5番目のアイテムを変更すると、Reactは特にkeyを除いてどのエレメントを変更するのかを知りません。したがって、.map()のアイテム全体を再描画します。

keyを指定すると、そのkeyの要素は再描画され、残りの9つの項目はそのまま残ります。これはパフォーマンスを向上させるためです。

[UPDATE]

key一意要素を反応させる識別するために予約されています。 iである必要はありませんが、ランダムな文字列でもかまいません。個人的には、ランダムなユニークキーを生成するのにshortidを使用します。

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

リアクトは、あなたが反応要素の配列を持っている場合、それは参照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の最新バージョンでは、data-reactidがDOMに公開されません。

Read this for better understanding