React でのキーの具体的な使用方法の紹介 (コード例)

この記事では、React でのキーの具体的な使用法 (コード例) を紹介します。必要な方は参考にしてください。

#反応プログラムを開発するときに、このような警告に遭遇して、「ああ!」と思うことがよくあります。ループのサブコンポーネントにキーを追加するのを忘れました~

便宜上、考えずにループのインデックスをキーとして使用することがありますが、これは本当に良いのでしょうか?キーの最適な選択はどの値ですか?

この記事では、「キー」を次の 3 つの側面から分析します。

1. キーを使用する理由

2. インデックスをキーとして使用する場合の問題

3. キーを正しく選択します

1. キーを使用する理由

React の公式ドキュメントではキーについて次のように説明されています:

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

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

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

React は、キーに基づいてコンポーネントを破棄するか、再作成するか、更新するかを決定します。

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

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

2. インデックスをキーとして使用する場合の問題

2.1 制御対象コンポーネント

スパンなどの単純な表示コンポーネント、これらのコンポーネントは制御されたコンポーネントです。つまり、それらの値は私たちがそれらに与える値になります。

サブコンポーネントが制御コンポーネントのみの場合、インデックスをキーとして使用しても表面上は問題が発生しないかもしれませんが、実際にはパフォーマンスに大きな影響を与えます。たとえば、次のコード:

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

要素データ ソースの順序が変更されると、対応する:

キー 0、1、および 2 を持つコンポーネントはすべて変更され、3 つのキーは変更されます。サブコンポーネントは再レンダリングされます。 (キーがまだ存在しているため、ここでの再レンダリングは破壊ではありません)

代わりに、一意の ID をキーとして使用します。

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

上記の更新原則に従って、値やサブコンポーネントのキーの変更は順序を変更するだけなので、react はそれらを移動するだけで、再レンダリングしません。

2.2 制御されていないコンポーネント

ユーザーが任意に変更でき、当社が制御できないコンポーネントは、インデックスをキーとして使用すると問題を引き起こす可能性があります。次の例を参照してください。

#サブコンポーネント:

  render() {
    return (
      <p>
        </p><p>值：{this.props.value}</p>
        <input>
      
    );
  }
}

親コンポーネント

{
this.state.data.map((element, index) => {
    return <child></child>
    })
}

最初の 2 つの入力ボックスに対応する値を入力します:

#次に、要素を head に追加します。

明らかに、この結果は期待を満たしていません。分析しましょう。何が起こったのか:

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

変更後:

    
值：5
    

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

次のことがわかります: キー 0、1、2 は変更されていません。ルールによれば、コンポーネントはアンインストールされません。変更されたプロパティを更新します。

react は p タグの値の変更のみを比較しますが、入力ボックスの値は変更されていないため、再レンダリングされず、p タグの値のみが更新されます。

一意の ID をキーとして使用する場合:

##

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

変更後:

    
值：5
    

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

明らかに見つかりました: キー 111、222、および 333 のコンポーネントはまったく変更されていません。React は、新しいサブコンポーネント 555 を挿入し、他のコンポーネントの位置を変更するだけです。

3. キーを正しく選択します

3.1 純粋な表示コンポーネントが表示のみに使用され、他の変更が発生しない場合は、インデックスを使用します。あるいは、他の異なる値をキーとして使用しても問題はありません。差分は発生せず、キーは使用されないからです。

3.2 インデックスの推奨使用法

次の状況のように、インデックスをキーとして使用しても問題が発生することはありません。

リストをレンダリングしたい場合ページをめくるたびに、クリックするたびにページめくりが再レンダリングされます:

一意の ID を使用します:

第一页
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
第二页
<ul>
    <li key="333">张三三</li>
    <li key="444">李四四</li>
    <li key="555">王五五</li>
</ul>

ページめくりの後、3 つのレコードのキーとコンポーネントが変更されたため、3 つのサブコンポーネントはアンロードされてから再レンダリングされます。

インデックスを使用:

第一页
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
第二页
<ul>
    <li key="0">张三三</li>
    <li key="1">李四四</li>
    <li key="2">王五五</li>
</ul>

ページをめくると、キーは変更されず、サブコンポーネントの値が変更され、コンポーネントはアンインストールされず、更新されるだけです。

3.3 サブコンポーネントが変更されているか、制御されていないコンポーネントを使用している可能性があります

ほとんどの場合、一意の ID をサブコンポーネントのキーとして使用しても問題はありません。

この ID は一意で安定している必要があります。つまり、このレコードに対応する ID は一意であり、決して変更されません。

math.random またはその他のサードパーティ ライブラリを使用して一意の値をキーとして生成することはお勧めできません。

データが変更されると、同じデータのキーも変更される可能性があるため、再レンダリングが行われ、不必要なパフォーマンスの無駄が発生する可能性があります。

データ ソースがニーズを満たさない場合は、レンダリング時に追加するのではなく、レンダリング前にデータ ソースに一意の ID を手動で追加できます。

以上がReact でのキーの具体的な使用方法の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。