Hogyan lehet hatékonyan kezelni az állapotot a Reactban

Ha sok React kódot írt, valószínűleg helytelenül használta az állapotot. Az egyik gyakori hiba, amit a React fejlesztői elkövetnek, hogy az állapotokat globálisan tárolják az alkalmazásban, ahelyett, hogy azokban az összetevőkben tárolnák őket, ahol használják.

Ismerje meg, hogyan alakíthatja újra a kódot a helyi állapot hasznosítására, és hogy ez miért mindig jó ötlet.

A React állapotának alapvető példája

Itt van egy nagyon egyszerű számláló alkalmazás ez példázza, hogyan kezelik általában az állapotot a Reactban:

import {useState} tól től'reagál'
import {Számláló} tól től'számláló'
funkcióApp(){
const [count, setCount] = useState(0)
Visszatérés<Számlálószámol={számol}setCount={setCount} />
}
exportalapértelmezett App

Az 1. és 2. sorban importálja a useState() horog az állam megteremtéséhez, és a Számláló összetevő. Ön határozza meg a

számol állam és setCount az állapot frissítésének módja. Ezután mindkettőt átadja a Számláló összetevő.

A Számláló komponens ezután a számol és hív setCount a szám növeléséhez és csökkentéséhez.

funkcióSzámláló({count, setCount}) {
Visszatérés (


 setCount(előz => előző - 1)}>-</button>
{count}</span>
 setCount(előz => előző + 1)}>+</button>
 </div>
 )
}

Nem te határoztad meg a számol változó és setCount helyileg működik a Számláló összetevő. Inkább a szülőkomponensből adtad át (App). Más szóval, globális állapotot használ.

A probléma a globális államokkal

A probléma a globális állapot használatával az, hogy az állapotot egy szülőkomponensben (vagy egy szülő szülőjében) tárolja, majd kellékként továbbadva ahhoz az összetevőhöz, ahol erre az állapotra ténylegesen szükség van.

Néha ez rendben van, ha olyan állapota van, amely sok összetevő között meg van osztva. De ebben az esetben egyetlen más komponens sem törődik a számol állam, kivéve a Számláló összetevő. Ezért jobb, ha az államot a Számláló komponens, ahol ténylegesen használják.

Az állam áthelyezése a gyermekkomponensbe

Amikor áthelyezi az állapotot a Számláló komponens, így néz ki:

import {useState} tól től'reagál'
funkcióSzámláló() {
const [count, setCount] = useState(0)
Visszatérés (


 setCount(előz => előző - 1)}>-</button>
{count}</span>
 setCount(előz => előző + 1)}>+</button>
 </div>
 )
}

Aztán benned App komponenst, nem kell semmit átadnia a Számláló összetevő:

// import
funkcióApp(){
Visszatérés<Számláló />
}

A számláló pontosan ugyanúgy fog működni, mint korábban, de a nagy különbség az, hogy az összes állam helyileg ezen belül van. Számláló összetevő. Tehát ha egy másik számlálóra van szüksége a kezdőlapon, akkor két független számlálója van. Minden számláló önálló, és gondoskodik a saját állapotáról.

Állapot kezelése összetettebb alkalmazásokban

Egy másik helyzet, amikor globális állapotot használna, az űrlapokkal van. A App Az alábbi komponens továbbítja az űrlapadatokat (e-mail cím és jelszó) és a beállító módszert a Bejelentkezési űrlap összetevő.

import { useState } tól től"reagál";
import { Bejelentkezési űrlap } tól től"./Bejelentkezési űrlap";
funkcióApp() {
const [formData, setFormData] = useState({
 email: "",
 Jelszó: "",
 });
funkcióupdateFormData(newData) {
 setFormData((előz) => {
Visszatérés { ...előző, ...újAdatok };
 });
 }
funkcióonSubmit() {
konzol.log (formData);
 }
Visszatérés (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

A Bejelentkezési űrlap komponens fogadja a bejelentkezési információkat, és megjeleníti azokat. Amikor elküldi az űrlapot, meghívja a updateData függvény, amely szintén a szülőkomponenstől származik.

funkcióBejelentkezési űrlap({ onSubmit, data, updateData }) {
funkcióhandleSubmit(e) {
 e.preventDefault();
 onSubmit();
 }
Visszatérés (


"email">E-mail</label>
 típus="email"
 id="email"
 value={data.email}
 onChange={(e) => updateData({ email: e.target.value })}
 />
"Jelszó">Jelszó</label>
 típus="Jelszó"
 id="Jelszó"
 value={data.password}
 onChange={(e) => updateData({ Jelszó: e.target.value })}
 />
"Beküldés">Küldés</button>
 </form>
 );
}

A szülőkomponens állapotának kezelése helyett jobb áthelyezni az állapotot ide LoginForm.js, ahol a kódot fogja használni. Ezzel minden komponens önállóvá válik, és nem függ az adatok másik összetevőjétől (azaz a szülőtől). Íme a módosított változat Bejelentkezési űrlap:

import { useRef } tól től"reagál";
funkcióBejelentkezési űrlap({ onSubmit }) {
const emailRef = useRef();
const passwordRef = useRef();

funkcióhandleSubmit(e) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 jelszó: passwordRef.current.value,
 });
 }
Visszatérés (


"email">E-mail</label>
"email" id="email" ref={emailRef} />
"Jelszó">Jelszó</label>
"Jelszó" id="Jelszó" ref={passwordRef} />
"Beküldés">Küldés</button>
 </form>
 );
}

Itt a bemenetet egy változóhoz köti a segítségével ref attribútumok és a useRef A frissítési módszerek közvetlen átadása helyett reagáljon. Ez segít eltávolítani a bőbeszédű kódot és optimalizálja az űrlap teljesítményét a useRef hook segítségével.

A szülő komponensben (App.js), eltávolíthatja a globális állapotot és a updateFormData() módszert, mert már nincs rá szüksége. Az egyetlen funkció maradt onSubmit(), amelyet belülről hív meg Bejelentkezési űrlap összetevőt a bejelentkezési adatok naplózásához a konzolon.

funkcióApp() {
funkcióonSubmit(formData) {
konzol.log (formData);
 }
Visszatérés (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Nemcsak a lehető leghelyesebbé tette az államot, hanem ténylegesen megszüntette az állam szükségességét (és használta refs helyette). Tehát a te App komponens lényegesen egyszerűbb lett (csak egy funkciója van).

A te Bejelentkezési űrlap komponens is egyszerűbb lett, mert nem kellett aggódnia az állapot frissítése miatt. Inkább csak kettőt tarts számon refs, és ez az.

Megosztott állapot kezelése

Egy probléma van azzal a megközelítéssel, hogy megpróbáljuk az államot a lehető leghelyesebbé tenni. Gyakran találkozhatunk olyan helyzetekkel, amikor a szülőkomponens nem használja az állapotot, de átadja azt több összetevőnek.

Példa erre, ha a TodoContainer szülőkomponens két gyermekkomponenssel: Feladatlista és TodoCount.

funkcióTodoContainer() {
const [todos, setTodos] = useState([])
Visszatérés (
 <>


 </>
 )
}

Mindkét gyermekkomponens megköveteli a todos állapot, szóval TodoContainer átadja mindkettőjüknek. Az ilyen forgatókönyvekben az államot a lehető leghelyesebbé kell tenni. A fenti példában behelyezve a TodosContainer olyan helyi, amennyire csak lehet.

Ha ezt az állapotot a magáéba helyezné App komponens, akkor nem lenne olyan helyi, amennyire csak lehetséges, mert nem ez a legközelebbi szülő ahhoz a két összetevőhöz, amelynek szüksége van az adatokra.

Nagy alkalmazások esetén az állapot kezelése csak a useState() horog nehéznek bizonyulhat. Ilyen esetekben előfordulhat, hogy a React Context API vagy React Redux hatékonyan irányítani az államot.

További információ a React Hookokról

A React alapját a horgok alkotják. A React hookjainak használatával elkerülheti, hogy olyan hosszú kódot írjon, amely egyébként osztályokat használna. A useState() hook kétségtelenül a leggyakrabban használt React hook, de sok más is létezik, például a useEffect(), a useRef() és a useContext().

Ha jártas akar lenni az alkalmazások fejlesztésében a React segítségével, akkor tudnia kell, hogyan használhatja ezeket a horgokat az alkalmazásában.