Projeyi harcamak ister misin? Bana bunun gibi bir düzine React Hooks verin!
Tam metin 1052 kelimedir ve beklenen öğrenme süresi 5 dakikadır.
Kaynak: unsplash
Üç ana JavaScript kütüphane çerçevesinden biri olan React.js, tüm dünyada popülerdir ve tüm dünyadaki geliştiriciler ve şirketler bunu kullanır. Facebook bunu geliştirdi ve Mayıs 2013'te açık kaynaklı.
React, tek sayfalık uygulamalar oluşturma şeklini gerçekten değiştirdi ve kancalar anahtar. Kancalar geçen yıl tanıtıldı ve durumla uğraşırken sınıf bileşenleri yerine işlevsel bileşenleri kullanmamıza izin verdi. Yerleşik kancalara ek olarak, React ayrıca özel kancaları da destekler.
Özel kancalarla çiçek oynamak ister misin? Söylemesi zor, hadi aşağı bakalım!
Kaynak: unsplash
1. useFetch
useFetch, getirmeyi açıklayıcı bir şekilde gerçekleştirebilir. İlk olarak, yanıt ve hata durumu değişkenlerini başlatmak için useState'i kullanın, ardından fetch'i eşzamansız olarak çağırmak ve durumu güncellemek için useEffect'i kullanın ve son olarak yanıt veya hata değişkenlerini içeren bir nesneyi geri döndürün.
Star Wars API'den karakterleri almanıza ve isimlerini sunmanıza yardımcı olabilir:
2. useTimeout
Bu kanca ile setTimeout tanımlayıcı bir yöntem kullanılarak uygulanabilir. Önce geri arama ve gecikmeyle özel bir kanca oluşturun, ardından geri arama işlevi için ref oluşturmak için useRef'i kullanın ve son iki kez useEffect'i kullanın. Son geri aramayı hatırlamak için bir kez kullanılır ve zaman aşımını ayarlamak ve temizlemek için bir kez kullanılır.
Zamanlayıcının nasıl çalıştığını görelim:
3. ClickInside'ı kullanın
Click olayı sarmalanmış bileşenlerin içinde gerçekleştirilirse, ClickInside doğru seçimdir. Öncelikle özel bir kanca oluşturun, click olayını işlemek için bir ref ve bir geri arama kullanabilirsiniz; ardından click olayını eklemek ve temizlemek için useEffect'i kullanın; son olarak, tıklanacak bileşen için bir ref oluşturmak için useRef'i kullanın ve ClickInside'a iletin.
4. useClickOutside
useClickOutside, useClickInside'a çok benzer, ancak tıklama olaylarını içeride değil sarmalanmış bileşenin dışında işlemekten sorumludur. Bu nedenle, yeniden özel bir kanca oluşturmak için, tıklama olayını işlemek için bir ref ve bir geri arama kullanabilirsiniz. Ardından tıklama olaylarını eklemek ve temizlemek için useEffect'i kullanın. Son olarak, bileşen için bir ref oluşturmak üzere useRef'i kullanın ve ClickOutside'a iletin.
5. useInterval
SetInterval'i açıklayıcı bir şekilde uygulamak istiyorsanız, kullanabilirsiniz.
İlk olarak, geri çağırmalar ve gecikmeler kullanılarak özel bir kanca oluşturulmalıdır. Sonra geri çağırma için bir başvuru oluşturmak üzere useRef'i kullanın. Son olarak, en son geri aramayı hatırlamak ve aralığı ve temizliği ayarlamak için useEffect'i kullanın.
Tarayıcı oyunları için özel bir kaynak sayacı yapmak için kullandım:
6. useComponentDidMount
Bu kanca, bileşeni yükledikten hemen sonra geri aramanın nasıl yürütüleceğini gösterir. İkinci parametre için, useEffect'i boş bir diziyle kullanın ve sağlanan geri aramayı bileşeni yükledikten hemen sonra çalıştırın.
7. usePrevious
Bu, uygulamalarda kullanılabilecek başka bir harika özel kancadır. Bununla birlikte, sahne donanımlarını veya önceki durumu saklayabilirsiniz. Önce değerleri kabul eden özel bir kanca oluşturun. Ardından bu değer için bir başvuru oluşturmak üzere useRef'i kullanın. Son olarak, en son değeri hatırlamak için useEffect'i kullanın.
Aşağıdaki örnek, sayacın uygulanmasını gösterir:
8. useComponentWillUnmount
useComponentWillUnmount önceki örneğe benzer, ancak bileşen kaldırıldıktan sonra geri çağırma hemen yürütülecektir. Bu nedenle, temizlemeden önce sağlanan geri aramayı yürütmek için ikinci parametre olarak bir boş diziyle useEffect'i tekrar kullanın.
AMAN TANRIM! Tüm geliştiriciler, hiçbir şey söyleme, onu kullan!
Yorum Beğen Takip Et
Yapay zeka öğrenme ve geliştirmenin kuru mallarını paylaşalım
Yeniden yazdırıyorsanız, lütfen arka planda bir mesaj bırakın ve yeniden yazdırma şartnamelerine uyun
