Hooks'a girmeden önce…

Hooks'un temellerine adım atmadan önce, onlara nasıl girdiğimizi anlamak önemlidir. Bildiğiniz gibi, React, bileşenleri tanımlamak için iki Javascript yapısını kullanmanıza izin verir: Functions veya Classes .

1️⃣ Sınıf:

• Sınıf Bileşeni: Kullanıcı arabirimini döndüren bir oluşturma yöntemini içeren bir JavaScript sınıfı. Ayrıca, yapıcı işlevinde durumu kurabilir ve durumu yönetebilir ve yaşam döngüsü yöntemlerinde yan etkiler gerçekleştirebilir.
• Pure Component: Sığ bir prop ve durum karşılaştırması ile bir mustComponentUpdate yöntemine sahip olduğundan sınıf bileşeninden farklıdır. Basit değerler için gereksiz yeniden oluşturmaları önler, ancak karmaşık ve derin nesneler için yanlış negatifler üretebilir.
• Stateless Component: Herhangi bir durum yönetimi olmayan bir JavaScript sınıfı.

2️⃣ İşlev:

• Durum Bilgisiz Bileşen: özelliklerden geçirilen ve kullanıcı arabirimini döndüren basit JavaScript işlevi.
• İşlev bileşeni: Durumu yönetmek, yan etkileri gerçekleştirmek ve kullanıcı arabirimini döndürmek için kancaları kullanan, özellikleri alan bir JavaScript işlevi.

React Hooks'tan önce, bir fonksiyon bileşeni yönetim durumuna sahip olmanın bir yolu yoktu.

İşlev bileşenleri, bileşendeki değerleri izleme ve aynı zamanda durumu ve kullanıcı arayüzünü senkronize tutma yeteneğine sahip durumsuz bileşenlere sahip olma ihtiyacıyla ortaya çıktı.

Ve şimdi… Hadi kancalara geçelim!

Her şeyden önce, bir kanca basit bir işlevdir. Aşağıdaki gönderide şu kancalardan geçeceğiz: useState , useEffect , useSelector , useDispatch ve useRef ✌️.

useState (Tepki)

• React'e bir durum değerini yönetme sorumluluğunu verir.
• R, mevcut değeri ve bir güncelleme fonksiyonu: iki elemanın bir dizi eturns.const [value, setValue] = useState(initialValue)
• Değişken için bir başlangıç ​​değeri ayarlamak için, başlangıç ​​değerini useState işlevine bir argüman olarak iletin .
• Yeni bir değer ayarlamak için güncelleyici işlevini kullanın. Yeni değer eskisinin yerini alır ↝ Durum değeri değiştiğinde React, kullanıcı arayüzünün yeni bir sürümüne ihtiyacı olacağını bilir ↝ oluşturma.setValue(newValue)
• Yalnızca tek bir değer almak yerine durumu yenisiyle birleştiren setState sınıf bileşeninden farklıdır.
• Bir durum değerini önceki değerine göre güncellemek için, güncelleyici işlevine ayarlanacak bir değer iletmek yerine bir işlevi iletebilirsiniz. React, o fonksiyona mevcut durum değerini iletecek ve o fonksiyonun dönüş değerini yeni durum değeri olarak kullanacaktır. Örnek
• ile uğraşırken dikkatli olun objects. Güncelleyici işleviniz özelliklerin yalnızca bir alt kümesini güncellerken, değişmeyen özellikleri önceki durumdan kopyaladığınızdan emin olun.setValue(state => { return {...state, property: newValue} })

• API çağrıları yapmak veya zaman aşımlarıyla çalışmak gibi yan etkileri gerçekleştirmek için kullanılır.
• useEffect işlevinin ilk argümanı efektin kendisi, ikincisi ise bağımlılık listesidir.useEffect(() => { Effect goes here }, dependencyList);
• React, bileşenin efekt çağırdığı son zamandan bu yana bağımlılık listesindeki değerlerin değişip değişmediğini kontrol ederek bir efektin çalıştırılıp çalıştırılmayacağını belirler.
• Ne zaman useEffect ikinci argüman olmadan denir, çalışan her işlemek sonra yürürlüğe yanıt verin.
• Tüm useEffect ikinci bağımsız değişken olarak geçirilen boş bir dizi ile birlikte kullanıldığında, yalnızca bir kez çalıştırıldığında, bileşen bağlar etkisi React. Bağımlılık listesini boş bir diziye ayarlayarak liste asla değişmez, bu nedenle efekt yalnızca bir kez çalışır (ilk bağlamalar).
• Efektleri temizlemek için efektten bir işlev döndürün. React, efekt fonksiyonunu tekrar çalıştırmadan önce ve bileşen ayrıldığında çalışır. Bunu neden yapmamız gerekiyor? Olay dinleyicilerine birden çok kez abone olurken bellek sızıntılarını önlemek için.

😉 Recapping Refs… Ref'ler, render yönteminde oluşturulan DOM düğümlerine veya React öğelerine erişmenin bir yolunu sağlar. Odağı veya animasyonları yönetmek için faydalı olabilir.

• currentÖzelliği düğüm referans değerine karşılık gelen ve bir başlangıç ​​değeriyle başlatılabilen değişken bir ref nesnesi oluşturmaktan sorumludur .const refContainer = useRef(initialValue);
• Döndürülen nesne, bileşenin tüm kullanım ömrü boyunca kalıcı olacaktır.
• React öğesine bir ref nesnesi iletirseniz, örneğin <div ref={myRef} />, React .currentözelliğini, o düğüm değiştiğinde karşılık gelen DOM düğümüne ayarlar .
• useRef her işlemede size aynı ref nesnesini verecek ve herhangi bir yeniden oluşturmayı tetiklemeyecektir.

Yalnızca React-Redux'a aşina iseniz ⚠️

• Bir React bileşenindeki Redux deposundan veri almaktan sorumludur.
• Sınıf Bileşenindeki MapStateToProps'a eşdeğerdir .
• İki bağımsız değişken alır: durumu veya durumun bir kısmını döndüren, seçici olarak adlandırılan bir işlev ve bir güncelleme gerekip gerekmediğini kontrol etmek için önceki ve mevcut durumun eşit olup olmadığını kontrol eden bir işlev (isteğe bağlı).const result = useSelector(selector, equalityFunction?)
• Seçici, tüm Redux deposu durumuyla tek argümanı olarak çağrılır.
• Seçici, işlev bileşeni her oluşturulduğunda çalıştırılacaktır.
• Seçici, bir eylem gönderildiğinde çalıştırılacaktır.
• Eşitlik Karşılaştırma İşlevi, yalnızca seçici sonucu son sonuçtan farklı görünüyorsa yeniden oluşturmayı zorlar. Örneğin, React-Redux kitaplığındaki sığEqual işlevini kullanabilirsiniz.

Yalnızca React-Redux'a aşina iseniz ⚠️

• Redux deposundan gönderme işlevine bir başvuru döndürür. const dispatch = useDispatch()
• Gerektiğinde eylemleri göndermek için kullanabilirsiniz. dispatch({type: ACTION_TYPE_EXAMPLE, payload: dummy})
• Sınıf Bileşenindeki MapDispatchToProps'a eşdeğerdir .

• Daha az kod ve daha iyi kod organizasyonu
• Daha kolay test edilebilir bileşenler
• Yeniden kullanılabilen ve paylaşılabilen harici işlevlere özelliklerin çıkarılması
• Daha basit yaşam döngüsü modeli, Sınıf Bileşenleri yan etki kodu ise birden çok yaşam döngüsü yöntemine bölünür (componentDidMount, componentWillUnmount, componentWillUpdate)
• Bir sınıf yapıcısında super() çağırmaya gerek yok
• Hiçbir birlikte çalışmalara ihtiyaç bu ve bağlama işleyicileri ve JavaScript kapatılması yararlanarak başlayın.

Referanslar:

Tepki Kancaları İş Başında

John Larsen tarafından

Geliştirici Blogu

https://dev.to/vitaliemaldur/resize-event-listener-using-react-hooks-1k0c