Reactでは、htmlタグのキー属性の機能は何ですか

Question

pタグのキー属性の機能は何ですか？私はdomを調べて、<p taco-1>で表現されたタコリストの各要素にpタグが表示されることを期待していましたが、それはちょうど<p>です。どんな説明も高く評価されます。

{this.props.tacos.map((taco, i) => { 
    return <p key={ `taco-${ i }` }>{ taco }</p>; 
})} 

Answer 1

どの要素が挿入されているか、どの要素が削除されたか、どの要素が更新されているかを調べるために、コンポーネントのコレクション内で反応して使用されます。 key属性がないと、コレクションの更新方法を決定するのが難しいです。例えば

、以下のコンポーネントのコレクションを参照してください。

<ul> 
    <li>England</li> 
    <li>France</li> 
</ul> 

し、次の状態が伝えレンダリングするように反応する：

<ul> 
    <li>England</li> 
    <li>Germany</li> 
</ul> 

DOMを更新するには、複数の方法があります：

• の変更が第2の内部テキスト<li>
• 秒を削除して<li>を追加し、新しいものを追加してください

キーを使用しないで、どちらを選択するかわかりません。

docsで詳しく読むことができます。