내 React 배열 어린이에게 고유 키가 필요한 이유는 무엇입니까?

React.js의 하위 배열에 대한 고유 키 이해

React에서는 성능 최적화를 위해 하위 배열에 고유 키를 할당하는 것이 중요합니다. 불필요한 것을 피하고 다시 렌더링합니다.

문제:
JSON 데이터 source.

조사:

``

{rows}

``
``
var TableRowItem = React.createClass( {
렌더링: 함수() {

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 구성 요소 내에서 렌더링된 요소.

행 배열의 각 하위 항목에 고유한 키 속성이 있는지 확인하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!