React'te State Nasıl Verimli Bir Şekilde Yönetilir?

Çok fazla React kodu yazdıysanız, büyük ihtimalle state'i yanlış kullanmışsınızdır. Pek çok React geliştiricisinin yaptığı yaygın bir hata, durumları kullanıldıkları bileşenlerde depolamak yerine uygulamada küresel olarak depolamaktır.

Yerel durumu kullanmak için kodunuzu nasıl yeniden düzenleyebileceğinizi ve bunu yapmanın neden her zaman iyi bir fikir olduğunu öğrenin.

React'te Temel Durum Örneği

İşte çok basit sayaç uygulaması bu, durumun tipik olarak React'te nasıl işlendiğini örneklendirir:

içe aktarmak {useState} itibaren'tepki'
içe aktarmak {Tezgah} itibaren'tezgah'
işlevUygulama(){
sabit [sayım, setCount] = kullanımDevlet(0)
geri dönmek<Tezgahsaymak={saymak}setCount={setCount} />
}
ihracatvarsayılan Uygulama

1. ve 2. satırlarda, kullanımDevlet() durumu oluşturmak için kanca ve Tezgah bileşen. siz tanımlayın saymak devlet ve setCount durumu güncelleme yöntemi. Sonra ikisini de Tezgah bileşen.

bu Tezgah bileşen daha sonra işler saymak ve aramalar setCount sayımı artırmak ve azaltmak için.

işlevTezgah({sayım, setCount}) {
geri dönmek (


 sayıyı ayarla(önceki => önceki - 1)}>-</button>
{sayı}</span>
 sayıyı ayarla(önceki => önceki + 1)}>+</button>
 </div>
 )
}

tanımlamadın saymak değişken ve setCount içinde yerel olarak işlev görür Tezgah bileşen. Bunun yerine, onu üst bileşenden ilettiniz (Uygulama). Başka bir deyişle, küresel bir durum kullanıyorsunuz.

Küresel Devletlerle İlgili Sorun

Genel bir durum kullanmanın sorunu, durumu bir üst bileşende (veya bir üst öğenin üst öğesinde) depolamanız ve ardından sahne malzemesi olarak geçmek bu durumun gerçekten gerekli olduğu bileşene.

Bazen birçok bileşen arasında paylaşılan bir durumunuz olduğunda bu iyidir. Ancak bu durumda, başka hiçbir bileşen saymak hariç devlet Tezgah bileşen. Bu nedenle, durumu devlete taşımak daha iyidir. Tezgah gerçekte kullanıldığı bileşen.

Durumu Alt Bileşene Taşıma

Eyaleti şuraya taşıdığınızda Tezgah bileşen, şuna benzer:

içe aktarmak {useState} itibaren'tepki'
işlevTezgah() {
sabit [sayım, setCount] = kullanımDevlet(0)
geri dönmek (


 sayıyı ayarla(önceki => önceki - 1)}>-</button>
{sayı}</span>
 sayıyı ayarla(önceki => önceki + 1)}>+</button>
 </div>
 )
}

Sonra senin içinde Uygulama bileşene herhangi bir şey aktarmanız gerekmez. Tezgah bileşen:

// içe aktarma
işlevUygulama(){
geri dönmek<Tezgah />
}

Sayaç tam olarak daha önce çalıştığı gibi çalışacaktır, ancak büyük fark, tüm durumlarınızın yerel olarak bunun içinde olmasıdır. Tezgah bileşen. Dolayısıyla, ana sayfada başka bir sayacınız olması gerekiyorsa, o zaman iki bağımsız sayacınız olur. Her sayaç bağımsızdır ve kendi durumuyla ilgilenir.

Durumu Daha Karmaşık Uygulamalarda İşleme

Küresel bir durum kullanacağınız başka bir durum da formlardır. bu Uygulama aşağıdaki bileşen, form verilerini (e-posta ve şifre) ve ayarlayıcı yöntemini aşağıdakilere iletir: Giriş Formu bileşen.

içe aktarmak { kullanımDevlet } itibaren"tepki";
içe aktarmak { Giriş Formu } itibaren"./Giriş Formu";
işlevUygulama() {
sabit [formData, setFormData] = useState({
 e-posta: "",
 şifre: "",
 });
işlevgüncellemeFormData(yeni veri) {
 setFormData((önceki) => {
geri dönmek { ...önceki, ...yeniVeriler };
 });
 }
işlevgönderildiğinde() {
konsol.log (formData);
 }
geri dönmek (
 veri={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

bu Giriş Formu bileşen oturum açma bilgilerini alır ve işler. Formu gönderdiğinizde, veriyi güncelle üst bileşenden de aktarılan işlev.

işlevGiriş Formu({ onSubmit, data, updateData }) {
işlevişlemeGönder(e) {
 e.preventDefault();
 onSubmit();
 }
geri dönmek (


"e-posta">E-posta</label>
 tür="e-posta"
 kimlik="e-posta"
 değer={data.email}
 onChange={(e) => updateData({ e-posta: e.target.value })}
 />
"şifre">Şifre</label>
 tür="şifre"
 kimlik="şifre"
 değer={veri.şifre}
 onChange={(e) => updateData({ şifre: e.target.value })}
 />
"göndermek">Gönder</button>
 </form>
 );
}

Durumu üst bileşende yönetmek yerine durumu şuraya taşımak daha iyidir: LoginForm.js, kodu burada kullanacaksınız. Bunu yapmak, her bileşeni bağımsız hale getirir ve veriler için başka bir bileşene (yani üst öğeye) bağımlı değildir. İşte değiştirilmiş versiyonu Giriş Formu:

içe aktarmak {kullanımRef} itibaren"tepki";
işlevGiriş Formu({ onSubmit }) {
sabit emailRef = useRef();
sabit passwordRef = useRef();

işlevişlemeGönder(e) {
 e.preventDefault();
 gönderildiğinde({
 e-posta: emailRef.current.value,
 şifre: passwordRef.current.value,
 });
 }
geri dönmek (


"e-posta">E-posta</label>
"e-posta" kimlik="e-posta" ref={emailRef} />
"şifre">Şifre</label>
"şifre" kimlik="şifre" ref={passwordRef} />
"göndermek">Gönder</button>
 </form>
 );
}

Burada girişi kullanarak bir değişkene bağlarsınız. referans nitelikler ve kullanımRef Güncelleme yöntemlerini doğrudan iletmek yerine kancaya tepki verin. Bu, ayrıntılı kodu kaldırmanıza yardımcı olur ve useRef kancasını kullanarak form performansını optimize edin.

Üst bileşende (Uygulama.js), hem genel durumu hem de updateFormData() yöntem çünkü artık ona ihtiyacınız yok. Geriye kalan tek işlev onSubmit(), içinden çağırdığınız Giriş Formu oturum açma ayrıntılarını konsolda günlüğe kaydetmek için bileşen.

işlevUygulama() {
işlevgönderildiğinde(form verisi) {
konsol.log (formData);
 }
geri dönmek (
 veri={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Eyaletinizi olabildiğince yerel yapmakla kalmadınız, aynı zamanda herhangi bir duruma olan ihtiyacı da ortadan kaldırdınız (ve kullandınız). referanslar yerine). Yani senin Uygulama bileşen önemli ölçüde daha basit hale geldi (yalnızca bir işleve sahip).

Senin Giriş Formu Bileşen ayrıca daha basit hale geldi çünkü durumu güncelleme konusunda endişelenmenize gerek yoktu. Bunun yerine, sadece ikisini takip edin referanslar, ve bu kadar.

Paylaşılan Durumun İşlenmesi

Devleti olabildiğince yerel kılmaya çalışma yaklaşımıyla ilgili bir sorun var. Üst bileşenin durumu kullanmadığı, ancak durumu birden çok bileşene aktardığı senaryolarla sık sık karşılaşırsınız.

Bir örnek, TodoContainer iki alt bileşenli üst bileşen: Yapılacaklar listesi Ve Yapılacaklar Sayısı.

işlevTodoContainer() {
sabit [todos, setTodos] = useState([])
geri dönmek (
 <>


 </>
 )
}

Bu alt bileşenlerin her ikisi de todos devlet yani TodoContainer ikisine de verir. Bunun gibi senaryolarda, durumu olabildiğince yerel yapmalısınız. Yukarıdaki örnekte, onu içine koyarak TodosKonteyner alabildiğin kadar yerel.

Eğer bu durumu içine sokacak olsaydın Uygulama bileşen, mümkün olduğu kadar yerel olmayacaktır çünkü verilere ihtiyaç duyan iki bileşene en yakın ebeveyn değildir.

Büyük uygulamalar için, durumu yalnızca kullanımDevlet() kanca zor olabilir. Bu gibi durumlarda, tercih etmeniz gerekebilir. React Context API veya Redux'a Tepki Ver Devleti etkili bir şekilde yönetmek için.

Tepki Kancaları Hakkında Daha Fazlasını Öğrenin

Kancalar, React'in temelini oluşturur. React'te kancaları kullanarak, normalde sınıfları kullanacak uzun kodlar yazmaktan kaçınabilirsiniz. useState() kancası, tartışmasız en sık kullanılan React kancasıdır, ancak useEffect(), useRef() ve useContext() gibi daha pek çok kanca vardır.

React ile uygulama geliştirme konusunda uzmanlaşmak istiyorsanız, uygulamanızda bu kancaları nasıl kullanacağınızı bilmeniz gerekir.