TIL | 39 React key

3522 ワード
React TIL key テキストリンク

⚛ React key


反応キーとは?

  • KeyはいReactどの項目の識別値を変更、追加または削除するかを決定します.つまり、レンダリング中にどの要素が変化したかを決定するために使用されます.
  • Key値がなければ、仮想DOMを比較する過程で、順次リストを比較して変化を検出するが、key値があれば、より早く変化を発見できる.
    • ・67916、𘚠、뉪묪、뉪묪、뉪

    キー値の条件


  • 実際にエレメント内にレンダリングされるのではなく、エレメントにキー値を割り当てる必要がありますkeyすなわち、consolemethod内部に存在する要素にキー値を加える.(もちろん、DOM elementでは、要素が要素でない場合はキー値となります.)

  • 兄弟構成部品間でのみ一意の値です.△兄弟の間には固有のものがあるが、全局的にはどうでもいい.
    • 1-1. 構成部品(適用)
    commentList.map(element => {return (<Child key={element.id}>)})
    1-2. map()エレメント内で実際にレンダリングされるタグ(該当しません)
    <li key="{element.id}"></li>
  • map対象が素子でない場合はDOM元素(適用)
    • commentList2.map((element) => {
  return <li key={element.id}></li>;
});

    なぜkey値を特定の値(ex>データのid)ではなくインデックス値として使用できないのですか?

  • 新しい構成部品を追加または削除すると、レンダリング項目の順序に従ってChild値が変化し続ける.map()値はこの素子の固有値ではなく動的値であるためindex値は歪むだけでなく、望ましくない結果値も得られる.したがって、固有のkey値を与えることを推奨する.

    • Reference


  • リストとキー

  • 反応公式ドキュメント-コンポーネントとProps
    • GZIP圧縮解凍クラス
    prototype VS __proto__