Все дочерние компоненты повторно отображаются при нажатии на массив реквизитов

Question

У меня есть массив с именем roles, который я прокручиваю и создаю дочерние компоненты. Когда я нажимаю элемент на этот массив, все дочерние компоненты перерисовываются (на основе метода console.log в методе рендеринга).

Я подумал, что у реагирования был умный виртуальный домик, где только обновлялись элементы. Итак, почему все предметы перерисовываются, даже если все реквизиты детей остаются неизменными, когда дополнительный элемент добавляется к массиву? Я что-то делаю неправильно, когда я неправильно обновляю массив?

https://jsfiddle.net/reactjs/69z2wepo/

var Child = React.createClass({ 
    render: function() { 
     console.log('rendering!!') 
     return <li>{this.props.role.name}</li>; 
    } 
}); 


var Parent = React.createClass({ 
    getInitialState: function(){ 
     return { 
      roles: [ 
       {name: 'Admin', i: 0}, 
       {name: 'Janitor', i: 1}, 
       {name: 'Teacher', i: 2}, 
      ] 
     } 
    }, 
    addRole: function(){ 
     var i = this.state.roles.length; 
     var newRoles = this.state.roles.slice(); 
     newRoles.push({name: 'some role', i: i}) 

     this.setState({ 
     roles: newRoles 
     }) 
    }, 
    render: function() { 
      var roles = this.state.roles.map(function(role){ 
      return <Child role={role} key={role.i}/> 
     }); 
     return (
      <ul> 
      {roles} 
      <button onClick={this.addRole}>Add role</button> 
      </ul>); 
    } 
}); 

Answer 1

По умолчанию React всегда будет повторно вынести все. Существует метод жизненного цикла, называемый shouldComponentUpdate, который позволяет это поведение (он всегда возвращает true).

Посредством принятия shouldComponentUpdate верните либо истину, либо ложь в зависимости от того, какие изменения реквизита вы можете изменить, и сообщите Реагировать, чтобы не повторять все, все время.

var Child = React.createClass({ 
    shouldComponentUpdate: function(nextProps) { 
     if (this.props.role.name === nextProps.role.name) { 
      return false; 
     } 
     return true; 
    }, 
    render: function() { 
     console.log('rendering!!') 
     return <li>{this.props.role.name}</li>; 
    } 
});