ReactJSキーのシーケンシャルIDの生成

Question

Reactでは、配列内の要素に固有のkey属性が必要です。 React docsは、データからidを使用することをお勧めします。 idがない場合は、配列インデックスを「最後の手段」として使用することができます。ただし、インデックスを使用するとアイテムの順序を変更できるときにパフォーマンスの問題が発生する可能性があります。複数のソース配列から要素の配列を作成し、.map()を複数回呼び出すときには、それぞれ異なる変換を伴う厄介な問題がありました。その場合、配列のインデックスは一意ではありません。

私は私のコンポーネントに以下の定型を投げ始めました：そうのように使用することができ

constructor(props) { 
    super(props); 
    this.getId = this.getId.bind(this); 
    this.id = 0; 
} 

getId() { 
    return this.id++; 
} 

：

render() { 
    const items = this.props.greetings.map(text => ({ 
     <li key={this.getId()}>{text}</li> 
    })); 

    return (
     <ul> 
      {items} 
     </ul> 
    ); 
} 

これは、単純で高速で、問題はありません配列インデックスを使用していることがありますが、私が見過ごしているこのアプローチやより良い選択肢に問題があるかどうかはわかりません。これは悪い習慣ですか？配列インデックスの問題がないkeyを生成する他の簡単な方法はありますか？

Answer 1

これはReconciliation上のドキュメントは、通常は難しいことではありませんキーを見つけ、実際にキー

に言わなければならないものです。あなたが表示しようとしている要素には既に一意のIDがあるかもしれないので、キーはあなたのデータからくるだけです。 そうでない場合は、に新しいIDプロパティをモデルに追加するか、コンテンツの一部をハッシュしてキーを生成することができます。キーは兄弟間でユニークでなければならず、世界的にユニークでなければなりません。 最後の手段として、配列内のアイテムのインデックスをキーとして渡すことができます。アイテムの並べ替えが一度も行われない場合でも、リオーダーは遅くなります。

私はあなたが提案されたアプローチに従っていると思います。