Henüz React kancalarını öğrenmemiş bir React geliştiricisiyseniz, şimdi tam zamanı. Bu gönderi, useEffect React Hook'u ayrıntılı olarak inceleyecektir. Bir İsviçre Ordu bıçağının kanca eşdeğeridir. Bir bileşen bağlandığında nasıl veri alınacağı, bir durum veya bir destek değiştiğinde kodun nasıl çalıştırılacağı, zamanlayıcıların veya aralıkların nasıl ayarlanacağı gibi çeşitli sorunları çözer.
Bir useEffect, JSX döndürmeyen bir React bileşeninde "yapmak" istediğiniz hemen hemen her şey için kullanılır (herhangi bir yan etki türü). Ayrıca bileşen başına birkaç useEffect'iniz olabilir.
Tüm bu gücün bir bedeli var: nasıl çalıştığını anlamadığınız sürece kafa karıştırıcı olabilir. Bu gönderide, kavramsal modeli kavrayabilmeniz ve kendi kodunuza uygulayabilmeniz için çeşitli örneklere bakacağız.
Tepki Kancaları - Neyi çözmeye çalışıyor?
Hook'lar ilk olarak React 16.8 sürümünde tanıtıldı ve şimdi birçok React projesinde kullanılıyor. Hooks, bileşenler arasında kod tekrarı sorununun üstesinden gelir. Sınıflar kullanılmadan yazılırlar. Bu, React'in sınıfları terk ettiği anlamına gelmez; kancalar sadece alternatif bir yöntemdir.
React, durum bilgisi olan mantıkla hızlı bir şekilde karmaşık bileşenler oluşturmanıza olanak tanır. Sınıf, React Lifecycle Methods'a dayandığından bu bileşenleri ayırmak zordur. React Hooks'un devreye girdiği yer burasıdır.
Bir bileşeni daha küçük işlevlere bölmenize izin verirler. Kodu Yaşam Döngüsü yöntemlerine dayalı olarak daha küçük parçalara bölmek yerine, artık kodu işlevselliğe bağlı olarak daha küçük birimlere düzenleyebilir ve ayırabilirsiniz.
useEffect Hook nedir?
Kancalar, ES6 sınıfları yazmak zorunda kalmadan durum ve diğer tepki yeteneklerine erişmenizi sağlayan işlevlerdir. Tepki kancaları API'sinin useEffect adlı bir kancası vardır. Tepki yaşam döngüleri hakkında bilginiz varsa, useEffect kancası aşağıdakiyle aynıdır. bileşenDidMount, bileşenDidUpdate, ve bileşenWillUnmount yaşam döngüsü yöntemleri birleştirildi.
React Hooks belgelerine göre, ES6 sınıfı bileşen yaşam döngüsü yöntemleriyle ilgili bazı sorunları çözmek için oluşturulmuştur.
Sözdizimi
İlk argüman, her oluşturmadan sonra varsayılan olarak yürütülen bir geri çağırma işlevidir. İkinci parametre, Hook'a yalnızca hedef durum değiştiğinde geri arama talimatı veren isteğe bağlı bir Bağımlılık dizisidir.
Kanca, her bağımlılığın tarihsel ve mevcut durumlarını karşılaştırır. İki değer eşleşmezse, Hook ilk parametrede belirtilen geri aramayı başlatır. Bağımlılık dizileri olağan geri arama davranışını değiştirir ve Hook'un bileşen kapsamındaki diğer tüm bileşenleri yok saymasını garanti eder.
Temel kullanım
Bir mesajı kaydetmek için yukarıdaki kod örneğinde React useState kullanıyorum. Ondan sonra mesaj durumu değişkenimi alıp ekrana yazdırıyorum. Ancak, bileşen monte edildikten bir saniye sonra mesajı değiştirmek için Effect'i kullanmak istiyorum.
React çerçevesinden useEffect'i içe aktardıktan sonra efektimi useState satırının arkasına ekledim. useEffect için ilk parametre bir fonksiyondur. Bu işlev işleyici yürütüldüğünde, sağladığınız tüm yan etkilerle ilgilenecektir. İşlev, React bileşeni yaşam döngüsü olaylarından biri gerçekleştiğinde çağrılan bir geri arama işlevidir.
Ne zaman kullanılır?
useEffect kancası çeşitli durumlarda faydalı olabilir. Aşağıdakiler en önemlileridir:
- Sağlanan bir argümana bağlı olarak veri almak istediğimizde bu parametreyi istemci tarafından değiştirebiliriz. Parametre yeni verilerle güncellendikten sonra geri çağrılır.
- Bir API uç noktasından veri almak ve bunu istemci tarafında görüntülemek istiyorsak. Bileşenimiz işlendiğinde, useEffect kancasına verilen işlev veya işleyici yürütülür ve bileşen durumlarındaki veriler alınır. Bu durumlar daha sonra kullanıcı arabirimi bileşenlerinde kullanılır.
- Bileşeniniz dış dünyadan gelen verilere dayandığında ve verilerin gelmesini sağlayamadığımızda, Efekt kullanmalıyız (belki sunucu aşağıdadır). Sorun atmak ve diğer bileşenlerin görüntülenmesini engellemek yerine, bunları useEffect kancasına yerleştirin.
Kullanım durumları
Bileşen ilk çalıştırmadan sonra yeniden işlenirse yürütülmez.
Bir bileşen oluşturulduğunda veya yeniden oluşturulduğunda, her zaman yürütülmelidir.
Varsayılan olarak, program yalnızca bir kez çalışır. Daha sonra, prop değerleri değişirse şunu çalıştırın:
Eşzamansız etkinlikler için her zaman useEffect kullanın.
useEffect kod blokları, geliştirici arkadaşlarınız için asenkron işlerin bariz işaretleridir. useEffect kullanmadan asenkron kod oluşturmak mümkündür, ancak bu “React yöntemi” değildir ve hem karmaşıklığı hem de hata riskini artırır.
Kullanıcı arabirimini durdurabilecek eşzamansız kod yazmak yerine useEffect kullanmak, React topluluğunda iyi bilinen bir tekniktir, özellikle de React ekibinin bir yan etki gerçekleştirmek için bunu oluşturma şekli.
Bunu kullanmanın bir başka avantajı, geliştiricilerin kodu kolayca gözden geçirebilmeleri ve "kontrol akışının dışında" çalıştırılan kodu hemen algılayabilmeleridir; bu, yalnızca ilk oluşturma döngüsünden sonra önemli hale gelir. Ayrıca, bloklar yeniden kullanılabilir ve hatta daha semantik özel Kancalara çıkartmak için uygundur.
Bir örnek
useEffect kodunu kullanarak saniyede bir sayı artırın.
Sonuç
Benim görüşüme göre, useEffect Hook'un temel tasarım ilkelerini ve en iyi uygulamalarını anlamak, bir sonraki seviye React geliştiricisi olmak isteyip istemediğinizi öğrenmek için kritik bir beceridir.
Özetlemek gerekirse, useEffect Hook, zorunlu, potansiyel olarak tam mantığı etkileyen bir işlev alır. İkinci parametre olan bağımlılık dizisi, yürütmeyi etkilemek için kullanılabilir. Bununla uğraşırken geri dönüş fonksiyonunu kullanarak temizleme kodu yazmak da gereklidir.
Makalenin yardımcı olup olmadığını yorumlarda bize bildirin.
Yorum bırak