React 配列の子に一意のキーが必要なのはなぜですか?

React.js の配列の子の一意のキーを理解する

React では、パフォーマンスを最適化するために配列の子に一意のキーを割り当てることが重要ですそして不必要なものを避けるre-rendering.

問題:
JSONデータsource.

調査:

``

{rows}

``
``
var TableRowItem = React.createClass( {
レンダリング: function() {

var td = function() {
  return this.props.columns.map(function(c) {
    return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
  }, this);
}.bind(this);

return (<tr >{ td(this.props.item) }</tr>);

}
});
``

解決策:
この問題は、 TableRowItem コンポーネント内でレンダリングされる要素。

rows 配列内の各子が一意のキー プロパティを持つようにするには、TableRowItem コンポーネント内の要素にもキーを追加する必要があります。

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.key + '-' + c}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);

    return (<tr >{ td(this.props.item) }</tr>);
  }
});

一意のキーを に追加することで、 React は個々の要素を追跡し、効率的な更新を実行して、行全体の不必要な再レンダリングを防ぎます。

以上がReact 配列の子に一意のキーが必要なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。