Kancalar, genellikle bir sınıf bileşeninde elde ettiğimiz işlevsel bileşendeki durum, yaşam döngüsü yöntemleri ve diğer tüm özellikleri sağlamak için kullanılır. Ama aynı zamanda uygulamayı kolaylaştırır.

Nerede kullanılır

Kancalar esas olarak tepki veren fonksiyonel bileşenlerde kullanılır. Çünkü fonksiyonel bileşenler durumsuzdur ve kancalar, bize içlerindeki tepki özelliklerinin çoğunu kullanma kolaylığı sağlar.

Neden kancaları tercih ediyoruz?

Bunu anlamak için önce neden işlevsel bileşenleri kullandığımızı anlamalıyız çünkü sonuçta bunlar işlevsel bileşenlerin içinde kullanılıyor.

fonksiyonel bileşen kullanmanın faydaları

• Genellikle sınıf bileşeninde kullandığımız kalıtımın gereksiz kullanımını önler.
• bu nedenle kurucu ilan etmeye veya süper çağırmaya gerek yok.
• İşlevleri bileşenin bu bağlamına bağlamaya gerek yok .

Kullanım Durumu

Esas olarak durum değişkeni oluşturmak için kullanılır ve ayrıca durumu değiştirmek için bir işlev sağlar. Herhangi bir sayıda kullanılabilir.

const [ name, setName ] = useState ("Rajiv")

kullanım Etkisi

Bu kanca 3 yaşam döngüsü için kullanılabilir - componentDidMount, componentDidUpdate ve componentWillUnmount. Bir bileşende birden çok kez kullanılabilir.

useEffect ( ()=>{console.log('bu componentDidMount olarak çalışacak');}, [ ])

useEffect ( ()=>{console.log('bu componentDidUpdate olarak çalışacak');}, [ name])

useEffect ( ()=>{

return ()=>{console.log('bu componentWillUnmount olarak çalışacak'); }

}, [ ])

Redux için kancalar

Tepki ile aynı şekilde, tepki-redux kitaplığı da redux uygulamasını kolaylaştırmak için bazı kancalar sağlar. Onları görelim -

kullanımSeçici

Fonksiyonel bileşenlerin reaksiyona girmesi için redux deposu sağlamak için kullanılır. Daha önce redux'dan durum almak için mapStateToProps'u connect yöntemiyle kullandık.

const postsList = useSelector(store => store.posts.postsData)

Yukarıdaki örnekte de görebileceğiniz gibi useSelector, parametre olarak store içeren bir geri aramayı kabul eder ve bundan dönmek için istenen verileri seçebiliriz. Burada postData'yı mağazadan bir postsList olarak aldık, sonra haritayı kullanarak görüntülemek için kullanabiliriz.

kullanım Sevk

Doğrudan tepki bileşeninden bir eylem göndermek için kullanılır. Daha önce , bindActionCreators yardımıyla connect'ten veya mapDispatchToProps'tan göndermeyi kullanmamız gerekiyor .

const gönderme = useDispatch();

Yukarıdaki örnekte görebileceğiniz gibi useDispatch bir gönderme işlevi döndürür. Burada Ekle düğmesine tıklandığında addPost eylemi gönderdik.

çözüm

hooks, içindeki birçok harika özelliğin eklenmesiyle geliştirmeyi daha kolay ve basit hale getirir ve bileşen sınıfı için daha iyi bir seçenek sunar. Karmaşıklığı azaltır ve bu anahtar kelimenin karıştırılmasını önler.