1. 古い仮想DOMと新しい仮想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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLテーブルの内容の変更を監視し、MySQL binlogを有効にする
この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するた...
基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...
仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...
目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...
HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...
前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...
1. 仮想環境はプロジェクトに従い、単一のプロジェクト用の仮想環境を作成します(Python 3.4...
計算機の主な機能は数値計算を実行することです。計算機機能の Web インスタンスを開発すると、js ...
監視ホストの追加ホスト 192.168.179.104 が zabbix 監視項目に追加されます (...
HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...
jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...
コードが失われ、コンテナ内で実行されているイメージから必要なコードを回復する必要がある場合があります...
目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...