React bileşenlerinde componentDidMount'ta neden ajax isteği yapılmalıdır?

Question

Tepki belgeleri, ajax isteğinin componentDidMount yaşam döngüsü olayından başlatılması gerektiğini bildirir (bkz. react docs).

Neden bu etkinlik? ajax kullanarak veri yüklenirken

Çoğu durumda

, ben mesela bir yükleme çubuğu çeşit, görüntülemek istediğiniz:

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

ama bu render yöntem 3 kez (immediatelly sonra isLoading = true ve ayarlayarak takip kılmasıdır başlangıç ​​yangınlarını componentWillMount olaydan ajax isteği göndermeleri konusunda sorun ne isLoading = false

tarafından?

Answer 1

Eh, isLoading: true başlangıç ​​durumuna, gerek bir parçası olabilir bileşeni => sadece 2 render monte yaptıktan sonra değil 3.

https://github.com/reactjs/react-redux/issues/210 göre, sadece bir kez componentWillMount den render arayarak sonucu setState uyumsuz render sonra adı verilecek olursa, herhangi birşey olacağı anlamına gelir, bunu ayarlamak için etkisi (yorumları doğru anladığımda).

it would "iş" (DEV büyük olasılıkla) dolayısıyla bazen görünür, ancak sonuçları setState ile geri arama render önce yürütebileceği ve böylece hiçbir yükleme ekranı olacağı bir şans olup olmadığından emin ama gerçekte değil o

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

Answer 2

Nokta Ayrıca bkz ... Hata ayıklamak çok zor bir yarış durumu olacağını siz de yükleme çubuğunu (: true yükleme) göreceği şekilde bileşen başlangıç ​​durumuna sahip kılmak tepki izin vermek.

Satırı taşıyabilirsiniz: this.setState ({isLoading: true}) componentWillMount() içinde. componentWillMount öğesinde ayarlanma durumu, bileşeninizin yeniden oluşturulmasını tetiklemediğinden. Oluşturma yönteminiz güncellenmiş bileşeni alacaktır.