Componente ReactDidMount vs getInitialState

Question

Ho alcune domande su come reagire all'uso e ai modelli.

Dovrei usare

componentDidMount 

o

getInitialState 

nel caricamento dei dati in modo asincrono? Qual è la differenza tra i due?

Sto usando Backbone per le mie strutture di dati frontend

this.props.data = new BrandModel({ _id: this.props.params.brandId }); 
var that = this; 
this.props.data.fetch({ 
    success: function() { 
    that.setState({ brand: that.props.brand }); 
    } 
}); 
return null; 

Aggiornamento: grazie per le risposte

This Question sta suggerendo di non noi componentWillMount, ma capisco che la sua più espressivo di utilizzare componentDidMount in questo caso come getInitialState sembra essere pensato per essere utilizzato sincrono y

Aggiornamento 2:

ho dovuto tornare a utilizzare getInitialState come componentDidMount fuochi dopo il rendering e ho bisogno this.props.data per puntare a un oggetto

Answer 1

Io non sono sicuro di questo uso di Backbone, ma se carichi i dati in componentDidMount va bene, in sostanza quel codice inizierà ad essere eseguito dopo il rendering del componente - dopo che i dati sono stati recuperati e lo stato è stato reimpostato, il componente verrà visualizzato nuovamente. dati a quel punto. Questo tipo di pigro mi sta caricando.

Non sono sicuro che getInitialState stia bloccando, ma se lo è, il componente non verrà visualizzato fino a quando non verrà caricato lo stato. Ma penso che non lo sia, quindi i dati probabilmente non verranno recuperati al momento del rendering del componente.

componentWillMount può essere quello che vuoi, ma rivedere il React lifecycle per quello che pensi abbia più senso.

Answer 2

componentDidMount sarebbe stato chiamato dopo il componente è stato montato nel browser DOM (sarebbe chiamato dopo la prima di rendering e non sarebbe stato chiamato se si sta eseguendo il rendering lato server (a stringa)

getInitialState sarebbe chiamato quando il componente è stato creato, se si utilizza la sintassi della classe es6 è possibile inserire tale logica nel costruttore del componente direttamente assegnando a this.state

C'è anche componentWillMount che verrebbe chiamato prima del rendering per server e client - è più adatto nel vostro

Answer 3

Componentndid monte viene licenziato dopo il render e abbiamo caricare l'Ajax all'interno that.While durante l'attuale rendiamo controlliamo se l'oggetto ha i dati, altrimenti inviare div vuoto

componentDidMount: function() { 
      console.log("========> FIring"); 
      $.get("http://api.", function(response) { 
       if (this.isMounted()) { 
        this.setState({ 
        Data: response 
       }); 
       } 
      }.bind(this)); 
     }, 
     render: function() { 
      var data = this.state.Data; 
      if (this.state.promoData) { 
      return (<div>{data}</div> 
      ); 
      } else { 
       return (<div className="divLoading">Loading...</div>); 
      } 
     }