React.js - componentWillReceiveProps essere stato colpito due volte

Question

Ho un componente React.js che viene reso in questo modo:

<Social email={this.state.email} />; 

ci sono alcuni eventi nella pagina che aggiornamento this.state.email, e, di conseguenza, passare attraverso render , che invia un nuovo puntello email al componente Social.

In questa componente Social, sto ascoltando gli aggiornamenti in questo modo:

componentWillReceiveProps: function(nextProps) { 
    console.log('received props update', nextProps.email); 
    this.doSomeWork(); 
    } 

Quella linea console è reso due volte che rende il flash UI due volte insieme a chiamate verso le reti sociali.

potrei sempre fare qualcosa di simile:

if (nextProps.email != this.props.email) { 
     this.doSomeWork(); 
    } 

Ma c'è sembrata un po 'hacky ...

è il doppio messaggio previsto? e se è così, curioso perché?

In caso contrario, qual è il modo migliore per rintracciarlo ed eliminarlo?

Answer 1

Il componente Social viene probabilmente eseguito due volte perché setState viene chiamato due volte sul componente padre. È possibile impostare proprietà diverse da email ma la funzione di rendering viene chiamata in modo che il componente Social esegua il rendering due volte.

È possibile implementare shouldComponentUpdate metodo nel componente Social per evitare secondo il rendering:

shouldComponentUpdate: function(nextProps, nextState) { 
    return nextProps.email != this.props.email; 
}