React Hooks ile useState ve useEffect Kavramlarının Temel Anlatımı
React Hooks ile useState ve: React Hooks iddiası ne anlatıyor? React Hooks ile useState ve kapsamında, Görev Başlıyor ("Neden") Bir bileşenin bir şeyi "hatırlamasını" ilk kez denediğim zamanı hala hatırlıyorum. Bir düğmeye her tıklandığında artması gereken…
React Hooks ile useState ve: React Hooks iddiası ne anlatıyor?
React Hooks ile useState ve kapsamında, Görev Başlıyor (“Neden”) Bir bileşenin bir şeyi “hatırlamasını” ilk kez denediğim zamanı hala hatırlıyorum. Bir düğmeye her tıklandığında artması gereken basit bir sayacım vardı ve bileşen ortaya çıktığında bazı verileri getirmek istedim. İlk içgüdüm mü? Sınıf bileşenlerine ulaşın, this.state’e serpin ve sanki eski bir büyü kitabından büyü yapıyormuşum gibi, ComponentDidMount ve ComponentDidUpdate’i çağırın.
React Hooks ile useState ve kapsamında, Kod işe yaradı ama hantal görünüyordu; çok sayıda standart metin, tuhaf bağlamalar ve her yere dağılmış yaşam döngüsü yöntemleri. Ne zaman yeni bir durum parçası eklesem, aynı modeli ComponentDidUpdate’te kopyalamak zorunda kalıyordum. Sonunda zamanlayıcıyı veri alımından ayırmak gibi endişeleri ayırmaya çalıştığımda, temiz bir kullanıcı arayüzünden çok spagetti western’e benzeyen karmaşık bir karmaşayla karşılaştım.
React Hooks ile useState ve kapsamında, Kendime sormaya devam ettim: Daha iyi bir yol var mı? İşte o zaman Hooks’a rastladım. Söz basitti: yerel durum için useState, yan etkiler için useEffect ve her şey işlevsel bir bileşenin içinde yaşayabilirdi. İlk başta şüpheciydim; birkaç işlev gerçekten tüm yaşam döngüsünün yerini alabilir mi? Ancak birkaç saatlik kurcalamanın ardından, Neo’nun sonunda Matrix’in arkasındaki kodu gördüğünü hissettim.
Tasarım ve teknik ayrıntılar
React Hooks ile useState ve kapsamında, Vahiy (İçgörü) Hooks’un büyüsü onların yeni olması değil; sizi montaj, güncelleme ve geri aramaların bağlantısını kesin. useState, React’in yeniden oluşturmayı planlamak için çağıracağı bir ayarlayıcı işlevi sunar. Bu sihir değil; bu sadece mevcut değeri tutan bir kapak ve bir dağıtıcıdır.
React Hooks ile useState ve kapsamında, useEffect varsayılan olarak her oluşturma sonrasında çalışır, ancak belirli değerler değişmediyse React’e bunu atlamasını söyleyebilirsiniz. Bunu, bağımlılıkların listesine bakan ve alarmın çalınıp çalınmayacağına karar veren bir “gözetleme kulesi” olarak düşünün.
Gerçek “aha!” Aynı bileşende her biri kendi endişesinden sorumlu olan birden fazla useState ve useEffect çağrısına sahip olabileceğimi fark ettiğim an geldi. Artık bir düzine if (prevState.x !== state.x) kontrolüne sahip dev bir bileşenDidUpdate yok.
Bugünden bakınca ne kadar güvenilir?
Bunun yerine şunu yazabilirim: function Counter() { const [count, setCount] = useState(0); const [veri, setData] = useState(null); useEffect(() => { document.title = `${count} kez tıkladınız`; }, [sayı]); // yalnızca sayı değiştiğinde çalışır useEffect(() => { fetchData().then(setData); }, []); // montajda bir kez çalışır (boş derinlikler) Her efekt izole edilmiştir, her durum parçası açıktır ve bileşen, karmaşık bir romandan ziyade kısa bir hikaye gibi okunur.
Gücü Kullanmak (Kod ve Örnekler) Mücadele: Klasik Sınıf Bileşen sınıfı OldCounter, React.Component’i genişletir { durum = { sayı: 0, veri: boş }; bileşenDidMount() { this.fetchData(); } bileşenDidUpdate(prevProps, prevState) { if (prevState.count !== this.state.count) { document.title = `Evet ${this.state.count} kez tıkladınız; } } fetchData = () => { getir(‘/api/veri’) .then(res => res.json()) .then(veri => this.setState({ veri })); }; oluşturma() { dönüş (
Sayı: {this.state.count
{this.data &&Veri: {this.data.value
}Bir bağımlılığı kaçırırsanız eski kullanıcı arayüzü veya ekstra istekler alırsınız.
Okuyucu için pratik anlamı
Zafer: Hooks Destekli Fonksiyonel Bileşeni içe aktar React, { useState, useEffect } ‘react’ten; işlev YeniSayaç() { const [count, setCount] = useState(0); const [veri, setData] = useState(null); // Etki 1: Başlığı sayımla senkronize tutun useEffect(() => { document.title = `${count} kez tıkladınız`; }, [sayı]); // { eşzamansız işlev yükü() { const res = wait fetch(‘/api/data’); const json = wait res.json(); setData(json); } yük(); }, []); // boş deps = bir kez çalıştır geri dön (
Sayı: {count
{data &&Veri: {data.value
}Başlık efekti yalnızca saatlerin sayılır. Veri getirme hiçbir şeyi izlemez; bir kez çalışır. Eğer başka bir istatistiğe ihtiyacım olursa e, diyelim ki bir yükleme döndürücü, ben sadece başka bir useState ve belki de kendi deps’i olan başka bir useEffect ekliyorum. Artık yaşam döngüsü yöntemleriyle avlanmaya gerek yok.
Yaygın Tuzaklar (Kaçınılması Gereken “Patronlar”) Bağımlılık dizisini unuttum – UseEffect için ikinci argümanı dışarıda bırakırsanız, her oluşturmadan sonra çalışır. Bu, sonsuz döngülere (örneğin, etkinin içindeki durumu koşul olmadan ayarlamak) veya işin boşa gitmesine yol açabilir.
Eski kapanışlar – Bir efektin geri çağrısı içindeki oluşturmadan bir değişkene referans verdiğinizde, bunun bağımlılık dizisinde olduğundan emin olun veya eski bir değerin yakalanmasını önlemek için işlevsel güncelleyici formunu (setState(s => s + 1)) kullanın. Her ikisine de uyum sağlamak kolaydır, ancak kuralı içselleştirdiğinizde (efektin okuduğu her şeyi listeleyin) ikinci doğanız haline gelirler.
Bu Yeni Güç Neden Önemlidir Araç setinizdeki useState ve useEffect ile bileşenler bağımsız anlatılara dönüşür. Bir bileşeni yukarıdan aşağıya okuyabilir ve tam olarak hangi durumda olduğunu ve hangi yan etkileri tetiklediğini görebilirsiniz. Bu şunları sağlar: Hata ayıklamayı daha hızlı hale getirir – Artık ComponentDidMount, ComponentDidUpdate ve ComponentWillUnmount arasında geçiş yapmanıza gerek kalmaz.
Test etmek daha kolay – Tahmin edilebilir çıktılara sahip saf işlevler. Yeniden kullanılabilirlik daha yüksek – Özel kancaları çıkarın (useFetch, useForm) ve işleme destekleri veya daha yüksek dereceli bileşenler olmadan bileşenler arasında mantığı paylaşın.
Kısacası, React’in yaşam döngüsüyle mücadele etmeyi bırakıp kullanıcı arayüzünüzün ne yapması gerektiğini açıklamaya başlarsınız ve React’in şunları yapmasına izin verirsiniz: ne zaman olduğunu bil. Sıra sizde Yakın zamanda yazdığınız küçük bir sınıf bileşenini useState ve useEffect kullanarak işlevsel bir bileşene yeniden düzenlemeyi deneyin.
Bağımlılık dizilerine özellikle dikkat edin; onlara bir pilotun kalkıştan önce çalıştırdığı kontrol listesi gibi davranın. Bileşenin tam olarak eskisi gibi ama çok daha az gürültüyle davrandığını gördüğünüzde seviye atladığınızı anlayacaksınız. Kancaya geçeceğiniz ilk durum nedir? Önceki/sonraki kesitlerinizi yorumlarda paylaşın; görev kayıtlarınızı görmeyi çok isterim! Mutlu kodlama!
İlgili yazılar
- Python ile Temel Discord Sohbet ve Mental Sağlık Botu Yapımı
- Kod Yazmadan RAG ve Playwright ile AI Test Otomasyonu Nasıl Kurulur?
Ek okuma: MDN Web Docs
Editörün Notu
React Hooks, bileşenlerin durum yönetimini ve yan etkilerini daha sade ve okunabilir bir şekilde organize etmenizi sağlar; böylece karmaşık yaşam döngüsü yöntemleriyle uğraşmak yerine, fonksiyonel bileşenlerde daha temiz ve sürdürülebilir kod yazabilirsiniz.
