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 をよろしくお願いいたします。

以下もご興味があるかもしれません: