React におけるキー値の役割とキー値の使用法は何ですか? (コード付き)-jsチュートリアル-php.cn

React におけるキー値の役割とキー値の使用法は何ですか? (コード付き)

不言

リリース： 2018-08-22 17:46:25

オリジナル

2932 人が閲覧しました

この記事がもたらすのは、React におけるキー値の役割と、キー値の使用法についてです。 (コードを添付します)。困っている友人が参考になれば幸いです。

反応プロジェクトでは常にこのような落とし穴に遭遇します

React におけるキー値の役割とキー値の使用法は何ですか? (コード付き)

これは、子要素の配列走査には一意のキー値が必要であるという警告ですが、キーとは正確には何で、キーはシステム内で何を行うのかを説明します。コード効果？

キーの概要

React の key 属性は、開発者向けではありません (たとえば、コンポーネントのキーを設定した後もコンポーネントのキー値を取得できません)。それ自体が反応するためです。
簡単に言えば、React は ID カードが個人を識別するのと同じように、ID 識別子であるコンポーネントを識別するためにキーを使用します。各キーはコンポーネントに対応します。React は同じキーを同じコンポーネントと見なすため、同じキーに対応する後続のコンポーネントは作成されません。

キー使用シナリオ

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

例如：
{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

ログイン後にコピー

試してみると、後でエラーが消えてレンダリングに問題がないことがわかりますが、これは正常ですよね? ！ただし、配列インデックスをキーとして使用することは強くお勧めしません。
データの更新が単に配列の並べ替えや中間位置への新しい要素の挿入である場合、ビュー要素はすべて再レンダリングされます。

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

キーの値は一意で安定している必要があります

何度かキーの値を処理した後、キーの値はデータベースの主キーIDに似ており、一意で一意であると感じました。

//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <p>
    </p><h3>用户列表</h3>
    {this.state.users.map(u => <p>{u.id}:{u.name}</p>)}
  
 )
);

ログイン後にコピー

上記の例では、動的にレンダリングされたデータでは、キーがデータの ID によって決定され、Li Si と Wang Wu の ID が同じであるため、最終的なレンダリングが同じになることに注意してください。結果は、Zhang San、Li Si、Wang Wu 表示されません。主な理由は、React がキーに基づいて John IV と Wang Wu が同じコンポーネントであると判断し (John IV と Wang Wu のキー値が同じである)、最初のコンポーネントがレンダリングされ、後続のものは破棄されます。

このように、key 属性を使用すると、コンポーネントとの対応関係を確立できます。React は、キーに基づいてコンポーネントを破棄するか、再作成するか、更新するかを決定します

そして、Key はコンポーネントの安定性も確保する必要があります。値、例:

{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

ログイン後にコピー

特に上記の例に示すように、キーの値は Math.random() によってランダムに生成され、これにより配列要素内の各項目が破棄されてから再作成されます。さらに、一定のパフォーマンスのオーバーヘッドが発生し、予期しない問題が発生する可能性があります。

そのため、Key の値はその一意性と安定性を保証する必要があります