UseState vs. React'te useReducer: Doğru Durum Yönetimi Kancasını Seçmek

Bir web geliştirme işi almak istiyorsanız, React JavaScript kitaplığını öğrenirseniz başarılı olma şansınız daha yüksektir. React, endüstride en çok kullanılan kütüphanelerden biridir. React kütüphanesinin en ilginç özelliklerinden biri de kanca kavramıdır.

Kancalar, bir React uygulamasında mantığı izole eden ve yeniden kullanmanızı sağlayan JavaScript işlevleridir. Durum yönetimi için kullanabileceğiniz iki ana kanca vardır: kullanımDevlet kanca ve redüktörü kullan kanca.

useState Kancasına Genel Bakış

bu kullanımDevlet kanca, React'te durumu işlemenin en yaygın yoludur. Aşağıdaki sözdizimi, bu kancayı uygulamanızda nasıl kullanacağınızı gösterir:

sabit [durum, setState] = useState (initialStateValue);

Yukarıdaki kod bloğunda, durum değişken, verileri işlemeler arasında bellekte tutar. Ve setState manipüle eden "ayarlayıcı" işlevidir. durum değişken.

bu kullanımDevlet kanca, tam olarak iki elemanlı bir dizi döndürür. Aynı zamanda durum değişkeni için bir başlangıç ​​değeri alır.

Örneğin, kullanıcının yaşını temsil eden, başlangıç ​​değeri 17 olan bir durum değişkeni tanımlamak isterseniz, bunu şu şekilde yaparsınız:

sabit [userAge, setUserAge] = useState(17);

bu setUserAge işlevinin değiştirilmesinden sorumludur. kullanıcı yaşı durum değişkeni.

KullanıcıYaşını ayarla(19);

Durumu güncellemenin, bir bileşenin yeniden işlenmesini tetiklediğini ve bir durum değişkenini yanlış bir şekilde güncellemenin, kodunuzu bozabilecek sonsuz bir döngüye neden olabileceğini unutmamak önemlidir.

React'te, durumun doğrudan değiştirilmesi tavsiye edilmez (aşağıdaki kod bloğunda gösterildiği gibi), çünkü durum dışı değişkenlerdeki değişiklikler, bileşen oluşturma işlemleri arasında kalıcı olmaz.

kullanıcıYaşı = 19;

Durum, onu tanımlayan bileşen için yereldir. Ekranda birden çok kez oluşturulmuş aynı bileşenlere sahipseniz, her bileşenin kendi bağımsız durumu olacaktır.

işlevUygulama(){
geri dönmek (




 </div>
 )
}

Yukarıdaki kod bloğunda iki tane var. Anahtar ancak her bileşen kendi durumunu yönetir ve bir bileşen durumunu diğer bileşenle paylaşmadıkça diğer bileşene güvenmez.

React, durum güncellemelerini gruplayarak işler. Bu, bir durum değişkeninin ayarlayıcı işlevini çağırdığınızda, durum değişkeninin bir sonraki yeniden oluşturmaya kadar güncellenmediği anlamına gelir.

useReducer Hook'a genel bakış

useReducer bir React kancasıdır bu, aynı anda birden çok ilgili durumu işlemek istediğinizde kullanışlı olabilir. için sözdizimi redüktörü kullan şöyle bir şeye benziyor:

sabit [durum, gönderim] = useReducer (reducer, initialState)

Nazaran kullanımDevlet, içinde redüktörü kullan, var durum değişken ve bir sevk etmek eylemleri gönderen işlev redüktör yükleri işleyen ve güncelleyen işlev durum.

Örneğin, sayacı sıfırlayabilen, sayaç değerini artırabilen veya sayaç değerini azaltabilen düğmelerle basit bir sayaç uygulaması oluşturduğunuzu varsayalım. kullanma kullanımDevlet kodunuz şöyle bir şeye benzeyecek:

işlevTezgah(){
sabit [sayım, setCount] = kullanımDevlet(0);
geri dönmek(


 Sayı: {count}


 setCount (sayım + 1)}>Sayı artırın</button>
 sayıyı ayarla(0)}>Sıfırla</button>
 setCount (sayım - 1)}>Sayı Azalt</button>
 </div>
 </div>
 )
}

Yukarıdaki uygulama mükemmel çalışıyor. Ancak aynı sonuçları aşağıdakilerin yardımıyla da elde edebilirsiniz: redüktörü kullan kanca.

Bu örnek, basitçe nasıl yapıldığını göstermek içindir. redüktörü kullan kanca çalışır. Gerçek dünya uygulamasında, redüktörü kullan bu senaryo için aşırıdır.

redüktörü kullan ilgili durumların ve karmaşık mantığın ele alınmasını kolaylaştırır. tip sevkedilen geçti aksiyon nesne.

Örneğin, gönderme işlevi bir aksiyon şuna benzeyen nesne:

{tip:"Eylem Türü", yük:durum * 2}

İlk olarak içe aktarın redüktörü kullan kanca, ardından tanımlayın redüktör parametrelerle işlev: durum ve tahrip edilmiş aksiyon nesne.

içe aktarmak {useReducer} itibaren"tepki";
işlevredüktör(durum, { tür, yük }) {
eğer (tip "sayı Artışı") {
geri dönmek yük;
 } başkaeğer (tip 'sayı Azaltma') {
geri dönmek yük;
 } başkaeğer (tip 'sayım Sıfırla') {
geri dönmek yük;
 } başka {
geri dönmek durum;
 }
}

tanımladıktan sonra redüktör işlevi, oluşturabilirsiniz Tezgah ile bileşen redüktörü kullan kanca.

işlevTezgah() {
sabit [sayı, sevk] = reducer kullan (redüktör, 0);
geri dönmek (


 Sayı: {count}


 sevk etmek({ tip: "sayı Artışı", yük: say + 1 })}>
 Sayıyı artır
 </button>
 sevk etmek({ tip: 'sayım Sıfırla', yük: 0 })}>
 Sayımı sıfırla
 </button>
 sevk etmek({ tip: 'sayı Azaltma', yük: saymak - 1 })}>
 Sayıyı artır
 </button>
 </div>
 </div>
 );
}

Yukarıdaki kod bloğunda, ilk düğme şu türde bir eylem gönderir: sayı artışı bir yük ile + 1 say. Bu eylem, sayım değerini artırmaktan sorumludur.

İkinci düğme, türde bir eylem gönderir saymakSıfırla sayma değerini tekrar 0'a sıfırlayan 0'lık bir yük ile.

Üçüncü düğme, türünde bir eylem gönderir. sayı Azaltma bir yük ile say - 1 sayma değerini 1 azaltır.

useState ve useReducer Kancaları Arasında Seçim Yapma

Artık nasıl kullanılacağını anladığınıza göre kullanımDevlet Ve redüktörü kullan kancalar, doğru olanı ne zaman kullanacağınızı bilmek önemlidir.

Durumunuz karmaşık mantık gerektirmiyorsa, o zaman açıkça redüktörü kullan aşırı olabilir.

Durumunuz başka bir şey değilse Sayılar, dizeler ve boole değerleri gibi JavaScript ilkelleri, kullanmalısınız kullanımDevlet kanca. Ve durum türü bir nesne veya bir dizi ise, kullanmayı düşünmelisiniz. redüktörü kullan yerine.

Uygulamanızın karmaşıklığı arttıkça, durumu yalnızca kullanımDevlet Ve redüktörü kullan kancalar.

Zamanı geldi Redux gibi harici kütüphaneleri kullanabilirsiniz., Jotai ve Zustand. Bu kitaplıklar, birden çok bileşende durum değişikliklerinin işlenmesini kolaylaştırır.

JavaScript Kitaplıklarıyla Durum Yönetimini Kolaylaştırma

React, Vue ve Svelte gibi kitaplıkların hepsinin kendi durumu ele alma yöntemleri vardır. Durum yönetimini vanilya JavaScript ile kendi başınıza yönetmek kesinlikle deneyebileceğiniz bir şeydir, ancak savaşta test edilmiş bir JavaScript kitaplığı kullanmak çok daha kolay ve kullanışlıdır.

Birkaç bileşeni yönetmeniz gereken React kullanarak karmaşık bir uygulama oluşturuyorsanız, Redux sizin için en iyi seçim olabilir.