なぜReactJSは動的な子供のためのキーを自動生成しませんか？

Question

ReactJSをコーディングするとき、私は動的な子供のためのキーを供給する必要があります。例：

​​

私はそれらのキーがある理由を理解しています。しかし、なぜ私はを与えなければなりませんか？実行中の番号やUUIDv4などを割り当てるだけでは反応できませんでしたか？

関連ドキュメント：http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 1

T1が、DR

あなたはそれが不要な再描画を停止するので、その要素のデータ（データベースフィールドから多分IDか何か）に関連付けられている動的な要素に固有のキーを割り当てる必要があります。これはReactの主な描写であり、なぜそれがその性能のために注目されているのですか。あなたは、これはデータの特定作品とのvirtual DOM仲間その要素をどのように反応するかであるため、動的子どもたちに固有のキーを割り当てる必要が

理由

。私は例が説明するのを助けると思う。

たとえば、1,000個の動的生成アイテムのリストがあるとします。 関数から渡されたindexパラメータを使用するだけで、これらのアイテムにキーを動的に割り当てることができます。しかし、それらのアイテムの順序を変更したい場合はどうでしょうか？アルファベット順に並べ替えるのはどうですか？これらの項目のkeyは特定のデータに結び付けられておらず、代わりに動的に生成されるだけなので、React仮想DOMはこれらの要素を追跡する手段がありません。つまり、並べ替えを変更するだけですべて要素を再描画する必要があります。ただし、これらのアイテムのそれぞれに、データベースから設定された一意のIDが割り当てられているとします。仮想DOMは、要素の順序が変更されても、要素自体のデータは変わらないことが分かります。したがって、その順序が変更されたにもかかわらず、要素のなしを再レンダリングします。

いずれかが不明瞭な場合は、仮想DOMがどのように実際に動作しているかを一度解説すると完全に理解できます。基本的に仮想DOMは実際のDOMのコピーです。 Reactは2つを比較し、実際に変更されたものだけを再レンダリングします。これは、リアクションがその速度を得る場所です。それで、3つの動的な<Item />コンポーネントのリストがあり、そのキーを動的に生成しているとしましょう。

<Item key="1">Banana</Item> 
<Item key="2">Orange</Item> 
<Item key="3">Apple</Item> 

これらのアイテムをアルファベット順に並べ替えると、それらのキーも動的に再割り当てされます。この時点で

<Item key="1">Apple</Item> 
<Item key="2">Banana</Item> 
<Item key="3">Orange</Item> 

キー1の内容を比較し、それはそれはとてもそれは完全にその要素を再レンダリングしたキー1のレンダリング以前から変化したか調べる反応します。次に、キー2をチェックします。その内容も変更されているので、再レンダリングされます。これはリスト全体で続きます。

ここで、各アイテムにデータベース内で関連付けられている固有のIDがあり、これをキーとして割り当てるとします。

<Item key="782364">Banana</Item> 
<Item key="434533">Orange</Item> 
<Item key="834535">Apple</Item> 

今、私たちはアルファベット順に、そのリストを並べ替え：この時点で

<Item key="834535">Apple</Item> 
<Item key="782364">Banana</Item> 
<Item key="434533">Orange</Item> 

は、キー834535を持つ項目の内容はまだ同じかどうかを確認します反応します。さて、内容ははまだです！したがって、その要素の順序が変わっても、ではなく、が再レンダリングされます。次に、キー782364の要素をチェックし、その内容も同じであることを確認します。これもリスト全体で続きます。

小さなリストでは、あなたはおそらく、パフォーマンス上の利点は、巨大ある大規模なリストのために、その要素のデータに直接接続された1対動的に生成されたキーの違いに気づかないだろうが。そしてそれは本当にリアクトの主な描写です - 非常にスマートな再レンダリング。

Answer 2

なぜダイナミック子供のためではないReactJSの自動生成キーのでしょうか？

何かが仮想DOMツリーの要素を識別するために必要です。

key ∈ {0,1,2,3}

しかし、それは不定動作であり、あなたがに依存しないべきでは：あなたが点検した場合key小道具といくつかの動的な子供たちのために生成されたHTMLは、あなたが表示されます省略しましたそれ。 警告はあります：

• リアクションはありません、あなたのアプリケーションについて何か推測したいですか？適切なキーを供給するのは開発者の責任であるため、すべての反応固有の最適化（例えばdomノードの再利用）を適用することができる。
• 彼ら（Facebook）はいつでも不特定のデフォルトの動作を変更することができ、それに依存しているコードを破ることができます。

十分に頻繁に繰り返すことはできません：デフォルトの動作に頼らないでください！