キー属性が反応し、それを使用する開発者にない登場特別なプロパティ、ですが、自身の使用を反応させるために、キー属性で、あなたは、単に、コンポーネント間の対応関係を確立することができます主要コンポーネントの使用を識別するために反応し、彼は誰もが同じ識別を行うためにIDカードを持っているのと同様に、アイデンティティです。同じキーに対応する後続のコンポーネントが作成されないように各キーは、同一である同じキーがコンポーネントに反応成分に対応します
同じキー
二つの要素が同じ鍵であり、素子の特性が変化した場合、要素の第一のタイプの同一の点を満たしている場合、更新のみ対応する構成要素は、属性を反応させ、この場合には、パフォーマンス・オーバーヘッドは比較的小さくなり
キー値が異なっています
機能行っレンダリングすると、新旧両方の仮想DOMは、この時間は、古い要素がアンマウントされる2つの要素が異なる鍵を持っている場合、それは別の要素であり、前と2つのレンダリング後に考慮される、比較されます新しい要素がマウントされます
//前に更新 レンダリング（）{ リターン（ < 一覧キー=」1' /> ）; } //更新した後 ）（レンダリング{ リターン（ < 一覧キー= '2' /> ）; }
第二に、例えば、
// tree1という < UL > < リーキー'1' = > 1 </ 李> < リーキー'2' = > 2 </ 李> </ UL > //ツリー2 < UL > < リーキー= '1' > 1 </ 李> < リーキー'3' = > 3 </ 李> < リーキー= '2' >2 </ 李> </ UL >
キーは大文字価値がない場合は、反応し、挿入操作を実行していない、彼は元の第2まっすぐなサブ要素を削除した後、サブ要素の残りの部分に追加して、実際には、私たちの操作は、1つのつのみのインサートを操作することができるだろう完全な。この問題を解決するために、我々はパフォーマンスのオーバーヘッドを減らすためにキー更新を提供する必要が反応し
キー値するケースがある場合は、2番目の要素は、元の第2の要素は、キーを通過するには、以下に移動され、元のtree1という第二の要素ではない樹上村でしょうそれに反応して動作時に、したがって、直接になりますパフォーマンス・オーバーヘッドオペレーションDOMを低減ポインティング挿入操作、
第三に、お勧めしませんキー値はインデックス属性
ほとんどの場合、我々はインデックスが重要な要素を表すために使用されるトラバースする配列でなければなりません。これは実際には非常に合理的ではありません。私たちは、不必要な更新操作を防ぐために、キーの真の目的で二回周りの要素間の対応を識別するためにレンダリングされています。私たちは、キー、挿入後のアレイ、並べ替えやその他の操作、元のインデックスを識別するためにインデックスを使用し、もはや元の値に対応するのであれば、そのキー自体が無意味になり、他の問題をもたらします
IV注意事項
キー値は一意で、その安定性を保証しなければならない反応
{ dataList.map（（項目、指数）=> { リターン< divのスタイル= {MyStyleは} キー= {Math.random（）} > {item.name} </ DIV > }） }