反応におけるキーの使用法は何ですか

react では、コンポーネントを識別するためにキーが使用されます。DOM 内の特定の要素が追加または削除されたときに、どの要素が変更されたかを識別できます。これは一種の識別であり、それに基づいて破棄するか削除するかを決定できますコンポーネントを更新します。キーが同じでコンポーネントが変更された場合、コンポーネントの対応するプロパティのみが更新されます。キーが異なる場合、前のコンポーネントは破棄され、再レンダリングされます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react でのキーの使用法とは

簡単に言うと、React はコンポーネントを識別するためにキーを使用します。ID カードが個人を識別するために使用されるのと同じように、ID 識別子です。各キーはコンポーネントに対応しており、React では同じキーは同じコンポーネントであると見なされるため、同じキーに対応する後続のコンポーネントは作成されません。

キーは、DOM 内の特定の要素が追加または削除されたときに React がどの要素が変更されたかを識別するのに役立ちます。したがって、配列内の各要素に特定の ID を与える必要があります。

React の差分アルゴリズムはキーを一意の ID として扱い、コンポーネントの値を比較して更新する必要があるかどうかを判断します。そのため、キーがない場合、React はコンポーネントを更新する方法を知りません。 。

react がサブコンポーネントにキーがないことを検出すると、デフォルトで配列のインデックスがキーとして使用されるため、キーを渡さずに使用できます。

React は、キーに基づいてコンポーネントを破棄するか、再作成するか、更新するかを決定します。原則は次のとおりです:

• キーは同じで、コンポーネントが変更された場合, React は、コンポーネントの対応する変更のみを更新します。

• キーが異なる場合、コンポーネントは前のコンポーネントを破棄し、コンポーネント全体を再レンダリングします。

キーの使用シナリオ

プロジェクト開発において、キー属性の最も一般的な使用シナリオは、配列から動的に作成されるサブコンポーネントの場合です。各サブコンポーネントにキーを提供し、一意のキー属性値を追加します。 key の値は、動的にレンダリングされたサブ要素によって取得されるインデックスの位置に非常に近いと当然考える人もいるでしょう。index を直接使用して key の値を付加することはできないでしょうか? key={index}?

例:

{dataList.map((item,index)=>{
    return <div style={mystyle} key={index}>{item.name}</div>
    })
}

試してみると、エラーは消え、レンダリングに問題はありません。これは正常ですよね。 ！ただし、配列インデックスをキーとして使用することは強くお勧めしません。

データの更新が単に配列の並べ替え、またはその中間位置への新しい要素の挿入である場合、ビュー要素は再レンダリングされます。

例:

index=2 の要素を前方に移動すると、その要素のキーも変更され、このように変更されたキーは意味を持ちません。 「身分証明書」のような存在なので、紛失することはありません。もちろん、キー値を使用してサブコンポーネントを作成する場合、配列の内容が純粋な表示のみを目的としており、配列内の動的な変更が含まれない場合は、実際にインデックスをキーとして使用できます。

推奨される学習: 「react ビデオ チュートリアル 」

以上が反応におけるキーの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。