React でインデックスをキーとして使用することが推奨されないのはなぜですか?

React でインデックスをキーとして使用することが推奨されないのはなぜですか?

1. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。
2. 引き続き内容を比較し、置換用の新しい実際の DOM を生成します。
3. コンテンツとキーが同じ場合は、古い実際のDOMを変更せずに再利用します。

では、トラバーサル中に自動的に生成されたインデックスを各ノードのキーとして使用すると、どのような問題が発生する可能性がありますか? こちらは小さなケースです

まず、最初に人物を横断します

彼はそのようなプロセス、ソースデータになります

人数:
{ id: 1, 名前: “张三”, 年齢: 15 },
{ id: 2、名前: “Li Si”、年齢: 16 }、
]、

生成された実際のDOMノード

<ul>
      <li key="0">張三--15</li>
      <li key="1">李思--16</li>
    </ul>

次に、このリストの前に{id:3,name:'王五',age:14}のデータを挿入すると、次のようになります。

<ul>
   <li key="0">王武--14</li>
      <li key="1">張三--15</li>
      <li key="2">李思--16</li>
    </ul>

上記の更新により、王武が張三の以前のキーを占有していることがわかります。つまり、このプロセスを更新すると、新しい仮想dom

<li key="0">王武--14</li>

そして古い仮想DOM

<li key="0">張三--15</li>

新しいDOMを比較するときは、まず2つのキーを比較して、同じかどうかを確認します。内容を比較すると、1つはWang Wu-14で、もう1つはZhang San 15です。内容が変更されています。このとき、新しい仮想DOMを使用して新しい実DOMを生成し、ページを再レンダリングします。以前のZhang Sanが影響を受けて再生成する必要があるだけでなく、後続のLi SiもZhang Sanに置き換えられ、Zhang Sanの内容で新しい実DOMが生成されます。これにより、すべてのDOMが再生成されて再レンダリングされるため、パフォーマンスが低下します。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>ドキュメント</title>
  </head>
  <本文>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.js"></script>

    <div id="ルート"></div>
    <script type="text/babel">
      root を document.getElementById("root"); とします。
      クラスAppはReact.Componentを拡張します。
        コンストラクタ(props) {
          スーパー(小道具);
        }
        状態 = {
          人数:
            { id: 1, 名前: "张三", 年齢: 15 },
            { id: 2、名前: "Li Si"、年齢: 16 }、
          ]、
        };
        ハンドル = () => {
          const { persons } = this.state;
          定数p = {
            id: 0,
            名前: 「王武」、
            年齢: 14歳
          };
          this.setState({
            人: [p, ...人],
          });
        };
        与える() {
          戻る (
            <div>
              <button onClick={this.handle}>クリックして追加</button>
              <ul>
                {this.state.persons.map((人, インデックス) => (
                  <li キー = {インデックス}>
                    {人名}--{人年齢}
                  </li>
                ))}
              </ul>
            </div>
          );
        }
      }
      ReactDOM.render(<App name="hell" />, ルート);
    </スクリプト>
  </本文>
</html>

上記の推論の後に id を唯一のキー値として使用した場合に何が起こるか想像してみてください。

アップデート前

<ul>
      <li key="1">張三--15</li>
      <li key="2">李思--16</li>
    </ul>

アップデート後

<ul>
   <li key="0">王武--14</li>
      <li key="1">張三--15</li>
      <li key="2">李思--16</li>
    </ul>

今回は Wang Wu が Zhang San の前に挿入されますが、Wang Wu と上のノードを比較して、同じ key=0 ノードがあるかどうかを確認するだけです。レンダリング用に新しい実際の DOM は生成されません。Zhang San は、上のノードと key=1 を比較し、key=1 のノードがあることを検出します。次に、それらのコンテンツを比較して、同じかどうかを確認します。同じ場合は、古い実際の DOM を再利用してパフォーマンスを節約できます。

React でインデックスをキーとして使用することが推奨されない理由についての説明はこれで終わりです。React のインデックスをキーとして使用することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で v-for を使用するときに、インデックスをキーとして使用できないのはなぜですか?
  • Vue でインデックスをキーとして使用すべきでない理由の詳細な説明 (diff アルゴリズム)
  • vue2.0 で削除または変更された項目 (インデックス キーが削除されました)

<<:  MySQLテーブルの内容の変更を監視し、MySQL binlogを有効にする

>>:  Linuxでホスト名を変更する方法

推薦する

WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します

この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するた...

Docker Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

Vue の NetEase Cloud Music Player インターフェースを模倣したシンプルな実装プロセス

仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...

...

WeChatアプレット開発によりホームページポップアップボックスアクティビティガイダンス機能が実現

目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

Ubuntuのpython3でvenvを使用して仮想環境を作成する

1. 仮想環境はプロジェクトに従い、単一のプロジェクト用の仮想環境を作成します(Python 3.4...

ネイティブ JavaScript を使用して計算機のサンプル コードを開発する

計算機の主な機能は数値計算を実行することです。計算機機能の Web インスタンスを開発すると、js ...

Zabbixで監視する必要があるホストを追加するための詳細な手順

監視ホストの追加ホスト 192.168.179.104 が zabbix 監視項目に追加されます (...

HTML スタイル タグと関連する CSS リファレンスの詳細な説明

HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

Dockerコンテナイメージからコードを復元する手順

コードが失われ、コンテナ内で実行されているイメージから必要なコードを回復する必要がある場合があります...

Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法

目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...