React Hooks: useEffect

useState kancası hakkında en son yazdığımda, şimdi useEffect kancasının React'te ne yaptığını açıklayacağım. useEffect kancası, ES6 sınıfı bileşenlerinin yaşam döngüsü yöntemlerinin ortaya çıkardığı bazı zorlukları ele almak için geliştirilmiştir. Sınıf bileşenlerinden yaşam döngüsü yöntemlerini anlarsanız, bu kanca, componentDidMount, componentDidUpdate ve componentDidUnmount yaşam döngüsü yöntemlerine eşdeğerdir. Kancaların bu yaşam döngüsü yöntemlerinin yerini nasıl alabileceğini gösterecek bir örnek kullanacağım.

Öncelikle useEffect'in nasıl göründüğüne bir göz atalım. Bu kanca, iki bağımsız değişken alan bir işlevdir. Birincisi, içinde yan etki mantığı olan bir geri aramadır. İkincisi, isteğe bağlı bir bağımlılık dizisidir. useEffect kancası, yalnızca oluşturmalar arasında bağımlılıklar değişirse geri aramayı yürütür. Bu, yan etkinin ne zaman çalıştığını kontrol etmenizi sağlar. Bağımlılıkların neye benzediğine ve ne yaptıklarına bakalım.

Bir bağımlılık dizisi sağlamazsanız, yan etki her oluşturmadan sonra çalışır.

Boş bir dizi sağlarsanız, yan etki, componentDidMount'a benzer şekilde yalnızca ilk oluşturma işleminden sonra çalışır.

Dizide bir durum veya destek değeri sağlarsanız, yan etki, componentDidUpdate'e benzer şekilde, bağımlılık her değiştiğinde çalışır.

Basit bir programla bir örnek yapalım. Bileşenim, bir sayacı artıracak bir düğmeye sahip olacak. Sayaç belirli bir sayıya ulaştıktan sonra belgenin başlığı değişecektir. İlk önce bileşeni minimum ile ayarlayalım. Sayaç için bir duruma ve bir işleyici işlevine sahip olacaktır.

Gördüğünüz gibi, bu bileşende zaten bir useEffect işlevim var. Bileşenlerde ilk oluşturma 'Monte', konsolda günlüğe kaydedilir. Düğme tıklandığında sayı 1 artar. Mükemmel şimdi diyelim ki bileşen her oluşturulduğunda bir şeyi konsol günlüğüne kaydetmek istiyoruz, ancak ilk oluşturmada değil. Kancalarla ilgili en iyi şey, aynı bileşende birden fazla kancaya sahip olabilmenizdir. Efektin ne zaman çalıştığını kontrol etmek için bazı koşullu ifadelerim olacak. Bunun gibi görünecek.

Efektin ilk işlemede tetiklenmesini önleyecek false olarak ayarlanmış bir değişken oluşturdum. Bundan sonra sayaç her artırıldığında konsolun doğru yazdırdığını görebileceksiniz. Bunun nedeni, bu kancanın bir bağımlılık argümanına sahip olmamasıdır, bu nedenle durum her değiştiğinde işler. Şimdi sayaçta belirli bir sayıya ulaşıldıktan sonra belgenin başlığını değiştirecek bir filtre uygulayalım. Bunun için başka bir durum kancası kullanmam ve başka bir koşullu ifade belirlemem gerekecek.

Şimdi sayaç 11'e ulaştığında belgenin başlığı güncelleniyor. Bunun nedeni, koşul karşılandığında filtre durumu değerinin true olarak değiştirilmesi ve kancanın çalışmasıdır. useEffect ile yapabileceğimiz bir şey daha var. Zamanlayıcıları temizlemek gibi bazı yan etkilerin temizlenmesi gerekir. Geri arama bir işlev döndürürse, kanca bunu bir efekt temizleme olarak değerlendirir.

Temizlemenin her oluşturmadan sonra çalışacağını göreceksiniz. Bu, componendDidUnmount ile sınıf bileşenlerinde yapabileceklerinize benzer.

Bu kancayı öğrenirken çok eğlendim. Bu, en önemli kancalardan biri ve aynı zamanda daha zor olanlardan biridir. Bununla birlikte biraz pratik yaptıktan sonra, çok mantıklı geliyor. Eh, hepsi useEffect için. Mutlu kodlama!