キー値をトラバースするための反応の役割
react や vue を学習する場合、配列を走査してページに表示する際にキー値を設定する必要があります。では、このキー値の機能は何ですか? ああを設定する方法？
古典的なインタビューの質問
- react/vueにおけるキー値の役割は何ですか?
- リストをトラバースするときにキー値をインデックス値にしてはいけないのはなぜですか?
答え
仮想DOMのキーバリュー関数
【簡単に言うと】キーは仮想DOMオブジェクトの識別子で、表示を更新する際にキーの値が非常に重要な役割を果たします。
[詳細]: ステート内のデータが変化すると、react は に従って新数据生成新的虚拟 DOM、React新虚拟 DOMは旧虚拟 DOMdiff と比較します。比較規則は次のとおりです。
- 古い仮想 DOM には、新しい仮想 DOM と同じキーがあります。
- 仮想 DOM のコンテンツが変更されていない場合は、以前の実際の DOM を直接使用します。
- 仮想 DOM のコンテンツが変更されると、新しい実際の DOM が生成され、ページ内の以前の実際の DOM が置き換えられます。
- 新しい仮想 DOM と同じキーが古い仮想 DOM に見つかりませんでした:
- データから新しい実際の DOM を作成し、ページにレンダリングします。
インデックスをキー値として使用することによって発生する可能性のある問題
- 逆順追加、逆順削除などのデータ操作を行う場合
- 不必要な実際の DOM の更新がありますが、インターフェイスの効果は役に立たず、効率が低下するだけです。
- 構造体に入力クラスの DOM も含まれている場合:
- 間違った DOM 更新が生成され、インターフェイスのレンダリングで重大なエラーが発生します。
- 【注意】 逆追加、逆削除など、データの順序を崩すような操作がない場合：
- レンダリングリストの表示にのみ使用され、インデックスをキー値として使用しても問題ありません。
開発時にキー値を選択する方法
- 最良のキー値は、id、携帯電話番号、ID 番号、学生番号など、各データの一意の識別子を使用することですが、一意である必要があります。
- 単なるデータ表示機能であると判断される場合は、インデックスを使用しても問題ありません。
結論
さて、私は長い間反応を学びました.今ではいくつかの重要な知識ポイントをほぼ理解しています.これまでに書いた反応ケースはすべてhtmlで書かれており、次の内容は足場ツールへの接続を開始することです.反応プロジェクトを作成する発展した。scaffolding を直接使用せず、html で記述するのはなぜですか? まずはreactの基本と原理を学び、それからscaffoldingの使い方はとても簡単で間違いはありません、まぁ以上です、次のブログ投稿から、scaffoldingの設置と使い方です、さあ！学ぶことが大好きな子どもたち！