React belgeleri neden componentWillMount'ta değil, componentDidMount'ta AJAX yapılmasını tavsiye ediyor?


102

componentDidMountDOM erişimi gerektiren her şey için neden uygun olduğunu anlıyorum , ancak bir AJAX isteğinin buna zorunlu olarak veya genellikle ihtiyaç duymadığını anlıyorum .

Ne oluyor?


@FurkanO Bileşen tarafından oluşturulan DOM öğelerine erişim anlamına geldiğini düşünüyorum. Ve o tamamen haklı, çünkü eğer içindeki söz konusu öğelere erişmeye çalışırsanız componentWillMount, bileşenin takılmadığı göz önüne alındığında başarısız olur.
ZekeDroid

@AlanH. Sorum silindi, elbette componentDidMount üzerinde doma erişiminiz var. Bu bir kuraldır, açıklanacak bir şey yoktur. Teşekkürler.
FurkanO

Kanımca, componentDidMount'tan sonra Ajax işlevini neden çağırdığımıza göre, öncelikle Element'in başlangıçta sorunsuz bir şekilde işlediğinden emin olmamız gerektiğidir. Bundan sonra ajax araması yapabiliriz. Önce
ajax'ı çağırırsak

Yanıtlar:


62

componentDidMountyan etkiler içindir. Olay dinleyicileri, AJAX ekleme, DOM'u değiştirme vb.

componentWillMountnadiren faydalıdır; özellikle sunucu tarafı oluşturmayı önemsiyorsanız (olay dinleyicileri eklemek hatalara ve sızıntılara ve ters gidebilecek birçok başka şeye neden olur).

Yapıcıyla componentWillMountaynı amaca hizmet ettiği için sınıf bileşenlerinden kaldırılmasından bahsediliyor. createClassBileşenlerde kalacaktır .


1
Olay dinleyicileri eklemek , sunucuda her zaman veya yalnızca içeride hatalara ve sızıntılara neden olur componentWillMount? Ayrımı gerçekten görmüyorum.
Alan H.

18
@Alan - React'i hem istemci tarafında hem de sunucu tarafında kullanıyorsanız, içindeki her şeyin bir sunucu tarafı componentWillMountoluşturmada yürütüldüğünü göreceksiniz. componentDidMountWheras kullanıyor olsaydın, bu sadece müşteri tarafında yürütülecekti. Sonuç olarak componentWillMount, dış etkileşimleri gerçekleştiren veya olaylara bağlanan şeyler koymak harika bir fikir değildir. Bileşenlerinizi sunucu tarafında işleme planınız yoksa, bu yalnızca potansiyel kod taşınabilirliği için hala iyi bir fikir değildir. Tüm bunlar, @daniula'nın cevabında açıklanan kötü olmasının ana sebebinin dışında.
Mike Driver

3
componentWillMount sunucuda çalıştırılır, ancak componentWillUnmount (dinleyicileri kaldırdığınız yer) değildir. Bu, dinleyiciler eklemenize ve onları asla temizlemenize neden olur.
Brigand

React çekirdek ekibindeki kişiler, componentWillMount'u gelecekteki sürümlerden kaldırmayı düşünüyor.
cchamberlain

1
@AnkitSinghaniya, sunucu oluşturma ve sığ birim testlerini bozardı.
Brigand

36

Ben de başlangıçta aynı sorunu yaşadım. Ben de istekte bulunmayı denemeye karar verdim componentWillMountama çeşitli küçük sorunlara yol açtı.

Ajax çağrısı yeni verilerle bittiğinde oluşturmayı tetikliyordum. Bir noktada bileşenin oluşturulması sunucudan yanıt almaktan daha fazla zaman aldı ve bu noktada ajax geri çağrısı, bağlanmamış bileşen üzerinde işlemeyi tetikliyordu. Bu biraz uç durumdur, ancak muhtemelen daha fazlası vardır, bu nedenle bağlı kalmak daha güvenlidir componentDidMount.


Tamam teşekkürler. Bunun gibi bir şey olabileceğini düşünmüştüm, ama haklısın, ajax isteğinin render yapılmadan önce bitmiş olması şaşırtıcı.
Alan H.

1
@daniula Emin misin? AJAX isteği işlenmeden önce nasıl tamamlanabilir?
Leon Grapenthin

4
Bu, tarayıcı asenkron dünyasıdır. Asla bir işlevin her zaman diğerlerinden daha hızlı olacağını varsaymamalısınız. Bahsettiğim gibi, uç durum ve muhtemelen işleme sürecinizi optimize etmeniz gerektiği anlamına gelir, ancak uygun yaşam döngüsü yöntemini kullanmak bu noktada hayatınızı çok daha kolaylaştıracaktır.
daniula

1
@SooChengKoh ES6 sınıf yapıcısı eşdeğerdir componentWillMount, bu nedenle componentDidMountajax çağrılarınız için kullanmaya devam etmelisiniz .
daniula

1
@SooChengKoh - Yapıcıda kesinlikle ayarlanması gereken duruma yol açacak, istemci ve sunucuda yarış koşullarına yol açacak hiçbir şey yapmamalı. Asla setStatebir bileşen yapıcısını çağırmamalısınız ve AJAX çağrısının ne zaman tamamlanacağını belirlemenin hiçbir yolu yoktur. twitter.com/dan_abramov/status/576453138598723585
cchamberlain

3

Belgelere göre durumu ayarlayarak componentWillMountyeniden oluşturmayı tetiklemeyecektir. AJAX çağrısı engellemiyorsa ve Promisebaşarılı olduğunda bileşenin durumunu güncelleyen bir döndürürseniz , bileşen oluşturulduktan sonra yanıtın gelmesi ihtimali vardır. Gibi componentWillMountbir tetiklemez İstemiş verilerle render bileşen varlıktır Beklediğiniz davranışı olmaz yeniden-işlemek.

Akı kitaplıklarından herhangi birini kullanırsanız ve istenen veriler, bileşenin bağlı olduğu depoda son bulursa (veya bağlı bir bileşenden devralırsa) bu bir sorun olmayacaktır çünkü bu verilerin alımı büyük olasılıkla sahne değiştirecektir. Sonuçta.


1
componentWillMountilk işlemeden önce yeni bir durum tanımlandığı için yeniden oluşturmayı tetiklemez. Ancak setStatebir AJAX geri aramasında çağrılırsa, kesinlikle ilk işlemeden sonra çağrılır ve yeniden oluşturmayı tetikler.
webdif
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.