ReactJS'de componentWillMount ve componentDidMount arasındaki fark nedir?

Facebook'un belgelerine ( React.Component ) baktım ve sadece componentWillMountistemcide çalıştırılırken istemci / sunucuda nasıl çağrıldığından bahsediyor componentDidMount. componentWillMountSunucuya ne yapar ?

componentWillMount esasen yapıcıdır. Oluşturmayı etkilemeyen örnek özelliklerini ayarlayabilir, eşzamanlı olarak bir mağazadan veri çekebilir ve bununla birlikte setState'i ve bileşeninizi kurarken çalıştırmanız gereken diğer basit yan etkili ücretsiz kodları ayarlayabilirsiniz.

Nadiren ihtiyaç duyulur ve ES6 sınıflarında hiç gerekmez.

constructoryöntem değildir aynı componentWillMount.

Redux'un yazarına göre, oluşturucudan eylemler göndermek risklidir çünkü işleme sırasında durumun değişmesine neden olabilir.

Ancak, buradan göndermek componentWillMountgayet iyi.

dan github konuya :

Bu, bir bileşenin yapıcısının içindeki dispatch () başka bir bileşenin içinde bir setState () oluşturduğunda gerçekleşir. React, bu tür uyarılar için "mevcut sahibin" kaydını tutar ve teknik olarak yapıcı uygulamanın başka bir bölümünde bir setState () oluşturmasına neden olduğunda kurucu içinde setState () 'i çağırdığımızı düşünür. Bunu halletmemiz gerektiğini düşünmüyorum - sadece React işini en iyi şekilde yapmaya çalışıyor. Çözüm, doğru bir şekilde belirttiğiniz gibi, bunun yerine componentWillMount () içine () göndermektir.

FakeRainBrigand'ın söylediği şeye eklemek gerekirse componentWillMount, sunucuda ve istemcide React işlenirken çağrılır, ancak componentDidMountyalnızca istemcide çağrılır.

componentWillMountrenderbir bileşenin BAŞLANGICI öncesinde yapılır ve sahne öğelerini değerlendirmek ve bunlara dayalı herhangi bir ekstra mantık yapmak için kullanılır (genellikle durumu da güncellemek için) ve bu nedenle, ilk sunucu tarafında oluşturulan işaretlemeyi elde etmek için sunucuda gerçekleştirilebilir .

componentDidMountrenderDOM güncellendiğinde baştan SONRA gerçekleştirilir (ancak bu DOM güncellemesi tarayıcıya boyanmadan ÖNCE, DOM'un kendisiyle her türlü gelişmiş etkileşimi yapmanıza izin verir). Bu elbette yalnızca tarayıcının kendisinde olabilir ve bu nedenle SSR'nin bir parçası olarak gerçekleşmez, çünkü sunucu yalnızca işaretleme oluşturabilir, DOM'un kendisini oluşturmaz, bu, SSR kullanılıyorsa tarayıcıya gönderildikten sonra yapılır.

Dediğiniz DOM ile gelişmiş etkileşimler? Ne var ?? ... Evet - bu noktada DOM güncellendiğinden (ancak kullanıcı güncellemeyi tarayıcıda henüz görmedi) kullanarak gerçek resmi ekrana kesmek window.requestAnimationFrameve ardından gerçek olanı ölçmek gibi şeyler yapmak mümkündür. Başka durum değişikliklerini gerçekleştirebileceğiniz, çıktısı alınacak DOM öğeleri, örneğin, bilinmeyen değişken uzunluklu içeriklere sahip bir öğenin yüksekliğine animasyon uygulamak gibi süper kullanışlıdır (artık içeriği ölçüp animasyona bir yükseklik atayabileceğiniz gibi), veya bazı durum değişiklikleri sırasında içerik senaryolarının yanıp sönmesini önlemek için.

Durum değişikliklerini korumak için çok dikkatli olun componentDid..., aksi takdirde sonsuz bir döngüye neden olabilir çünkü bir durum değişikliği aynı zamanda bir yeniden oluşturmaya ve dolayısıyla başka componentDid...ve sürekli olarak

Belgelere göre ( https://facebook.github.io/react/docs/react-component.html )

Will ön ekli yöntemler , bir şey olmadan hemen önce çağrılır ve

Did ön eki olan yöntemlere bir şey olduktan sonra hemen denir .

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Yine de bir "aldatma" var: Verileri almak için eşzamansız bir çağrı, işleme gerçekleşmeden önce geri dönmeyecek. Bu, bileşenin en az bir kez boş verilerle işleneceği anlamına gelir.

Verilerin gelmesini beklemek için oluşturmayı "duraklatmanın" bir yolu yoktur. ComponentWillMount'tan bir sözü geri döndüremez veya bir setTimeout'ta bir şekilde tartışamazsınız.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

Bileşenimizin Yerel Kullanıcı Arayüzüne (DOM, vb.) erişimi olmayacaktır. Henüz oluşturulmadıkları için çocuk referanslarına da erişimimiz olmayacak. ComponentWillMount (), konfigürasyonu yönetmemiz, durumumuzu güncellememiz ve genel olarak ilk render için hazırlanmamız için bir fırsattır. Bu, prop değerlerine göre hesaplamalar veya işlemler yapmaya başlayabileceğimiz anlamına gelir.

ComponentWillMount () için kullanım durumu

Örneğin, bileşen durumunuzda bileşenin oluşturulduğu tarihi tutmak istiyorsanız, bunu bu yöntemde ayarlayabilirsiniz. Lütfen bu yöntemdeki ayar durumunun DOM'u yeniden oluşturmayacağını unutmayın. Bunu akılda tutmak önemlidir, çünkü çoğu durumda bileşenin durumunu her değiştirdiğimizde, bir yeniden oluşturma tetiklenir.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

ComponentDidMount () için kullanım durumu

Örneğin, güncel haberlerle ilgili verileri alan ve kullanıcıya görüntüleyen bir haber uygulaması oluşturuyorsanız ve bu verilerin, kullanıcının sayfayı yenilemesine gerek kalmadan her saat güncellenmesini isteyebilirsiniz.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()Yöntem yalnızca sınıf bileşenlerinde mevcut sayfayı değiştirir, ancak ComponentWillMount()etkilenen tüm sayfaları değiştirir.setStates()