Perché la richiesta di ajax deve essere eseguita in componentDidMount nei componenti React?

Question

La documentazione di React indica che la richiesta di ajax deve essere avviata dall'evento componentDidMount ciclo di vita (vedere react docs).

Perché questo evento?

Nella maggior parte dei casi, quando si carica dati utilizzando ajax, voglio visualizzare un qualche tipo di barra di caricamento, ad esempio:

componentDidMount() { 
    this.setState({isLoading: true}); 
    fetch(...) 
     .then(...) 
     .then(() => this.setState({isLoading: false}) 
} 

ma questo spara render metodo 3 volte (iniziale renda immediatelly seguiti modificando isLoading = true e poi da isLoading = false

Cosa c'è che non va circa l'invio di richiesta AJAX da componentWillMount evento?

Answer 1

Beh, isLoading: true potrebbe essere parte dello stato iniziale, non c'è bisogno per impostarlo dopo componente ha fatto montare => solo 2 rendering, non 3.

Secondo https://github.com/reactjs/react-redux/issues/210, conseguenza di rimettere render solo una volta da componentWillMount significa che se setState saranno chiamati in modo asincrono dopo render, non avrà alcun effetto (se capisco correttamente i commenti).

Non so se c'è la possibilità che la richiamata con setState può eseguire prima render e quindi non schermata di caricamento sarà visibile, solo i risultati, quindi a volte sarebbe "lavoro" (molto probabilmente in DEV), ma in realtà sarebbe una condizione di competizione molto difficile da eseguire il debug ...

vedi anche https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

Point è lasciate che il vostro reagiscono componente rendering con lo stato iniziale in modo che si vedrà la barra di caricamento (caricamento: true).

È possibile spostare la riga: this.setState ({isLoading: true}) in componentWillMount(). Poiché lo stato di impostazione in componentWillMount non attiva un rerender del componente. Il metodo di rendering riceverà il componente aggiornato.