Kako učinkovito upravljati stanje v Reactu

Če ste napisali veliko kode React, obstaja velika verjetnost, da ste stanje uporabili nepravilno. Ena pogosta napaka, ki jo počne veliko razvijalcev Reacta, je globalno shranjevanje stanj v aplikacijo, namesto da bi jih shranili v komponente, kjer se uporabljajo.

Naučite se, kako lahko preoblikujete kodo za uporabo lokalnega stanja in zakaj je to vedno dobra ideja.

Osnovni primer stanja v Reactu

Tukaj je zelo preprosta uporaba števca ki ponazarja, kako se stanje običajno obravnava v Reactu:

uvoz {useState} od'reagirati'
uvoz {Števec} od'števec'
funkcijoaplikacija(){
konst [count, setCount] = useState(0)
vrnitev<števecštetje={count}setCount={setCount} />
}
izvozprivzeto aplikacija

V vrstici 1 in 2 uvozite useState() kavelj za ustvarjanje države in števec komponento. Vi definirate štetje stanje in setCount način posodabljanja stanja. Nato oboje prenesete na števec komponento.

The števec komponenta nato upodobi štetje in klice setCount za povečanje in zmanjšanje števila.

funkcijoštevec({count, setCount}) {
vrnitev (


 setCount(prev => prejšnji - 1)}>-</button>
{count}</span>
 setCount(prev => prejšnji + 1)}>+</button>
 </div>
 )
}

Niste definirali štetje spremenljivka in setCount delujejo lokalno znotraj števec komponento. Namesto tega ste ga posredovali iz nadrejene komponente (aplikacija). Z drugimi besedami, uporabljate globalno stanje.

Problem z globalnimi državami

Težava pri uporabi globalnega stanja je, da stanje shranite v nadrejeno komponento (ali nadrejeno nadrejeno komponento) in nato prenašajo kot rekvizite na komponento, kjer je to stanje dejansko potrebno.

Včasih je to v redu, ko imate stanje, ki si ga deli veliko komponent. Toda v tem primeru nobena druga komponenta ne skrbi za štetje stanje, razen za števec komponento. Zato je bolje, da državo premaknete v števec komponento, kjer se dejansko uporablja.

Premikanje države v otroško komponento

Ko stanje premaknete v števec komponenta bi izgledala takole:

uvoz {useState} od'reagirati'
funkcijoštevec() {
konst [count, setCount] = useState(0)
vrnitev (


 setCount(prev => prejšnji - 1)}>-</button>
{count}</span>
 setCount(prev => prejšnji + 1)}>+</button>
 </div>
 )
}

Potem znotraj svojega aplikacija komponente, vam ni treba ničesar posredovati števec komponenta:

// uvozi
funkcijoaplikacija(){
vrnitev<števec />
}

Števec bo deloval popolnoma enako kot prej, vendar je velika razlika v tem, da so vsa vaša stanja lokalno znotraj tega števec komponento. Torej, če potrebujete še en števec na domači strani, bi imeli dva neodvisna števca. Vsak števec je samostojen in skrbi za vse svoje stanje.

Obravnava stanja v bolj zapletenih aplikacijah

Druga situacija, ko bi uporabili globalno stanje, je z obrazci. The aplikacija spodnja komponenta posreduje podatke iz obrazca (e-poštni naslov in geslo) in metodo nastavitve do LoginForm komponento.

uvoz {useState} od"reagirati";
uvoz { prijavni obrazec } od"./LoginForm";
funkcijoaplikacija() {
konst [formData, setFormData] = useState({
 E-naslov: "",
 geslo: "",
 });
funkcijoupdateFormData(newData) {
 setFormData((prev) => {
vrnitev { ...prejšnji, ...noviPodatki};
 });
 }
funkcijoonSubmit() {
konzola.log (formData);
 }
vrnitev (
 podatki={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The LoginForm komponenta sprejme podatke za prijavo in jih upodablja. Ko oddate obrazec, pokliče updateData funkcijo, ki se prav tako prenaša iz nadrejene komponente.

funkcijoLoginForm({ onSubmit, data, updateData }) {
funkcijohandleSubmit(e) {
 e.preventDefault();
 onSubmit();
 }
vrnitev (


"E-naslov">E-pošta</label>
 vrsta="E-naslov"
 id="E-naslov"
 vrednost={data.email}
 onChange={(e) => updateData({ E-naslov: e.target.value })}
 />
"geslo">Geslo</label>
 vrsta="geslo"
 id="geslo"
 vrednost={podatki.geslo}
 onChange={(e) => updateData({ geslo: e.target.value })}
 />
"oddaj">Pošlji</button>
 </form>
 );
}

Namesto da upravljate stanje na nadrejeni komponenti, je bolje, da stanje premaknete v LoginForm.js, kjer boste uporabili kodo. S tem postane vsaka komponenta samostojna in ni odvisna od druge komponente (tj. nadrejene) za podatke. Tukaj je spremenjena različica LoginForm:

uvoz {useRef} od"reagirati";
funkcijoLoginForm({onSubmit}) {
konst emailRef = useRef();
konst passwordRef = useRef();

funkcijohandleSubmit(e) {
 e.preventDefault();
 onSubmit({
 e-pošta: emailRef.current.value,
 geslo: passwordRef.current.value,
 });
 }
vrnitev (


"E-naslov">E-pošta</label>
"E-naslov" id="E-naslov" ref={emailRef} />
"geslo">Geslo</label>
"geslo" id="geslo" ref={passwordRef} />
"oddaj">Pošlji</button>
 </form>
 );
}

Tukaj povežete vnos s spremenljivko z uporabo ref atributi in useRef React hook, namesto neposrednega posredovanja metod posodobitve. To vam pomaga odstraniti podrobno kodo in optimizirajte delovanje obrazca s kavljem useRef.

V nadrejeni komponenti (App.js), lahko odstranite tako globalno stanje kot updateFormData() metodo, ker je ne potrebujete več. Edina funkcija, ki ostane, je onSubmit(), ki ga prikličete iz notranjosti LoginForm komponento za beleženje prijavnih podatkov na konzoli.

funkcijoaplikacija() {
funkcijoonSubmit(formData) {
konzola.log (formData);
 }
vrnitev (
 podatki={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Ne samo, da ste naredili svojo državo čim bolj lokalno, ampak ste dejansko odstranili potrebo po kakršni koli državi sploh (in uporabili ref namesto tega). Torej tvoj aplikacija komponenta je postala bistveno enostavnejša (ima samo eno funkcijo).

Vaš LoginForm komponenta je postala tudi preprostejša, ker vam ni bilo treba skrbeti za posodabljanje stanja. Namesto tega samo sledite dvema ref, in to je to.

Upravljanje stanja v skupni rabi

Obstaja ena težava s pristopom poskušanja narediti državo čim bolj lokalno. Pogosto boste naleteli na scenarije, kjer nadrejena komponenta ne uporablja stanja, ampak ga posreduje več komponentam.

Primer je imeti a TodoContainer nadrejena komponenta z dvema podrejenima komponentama: Seznam opravil in TodoCount.

funkcijoTodoContainer() {
konst [todos, setTodos] = useState([])
vrnitev (
 <>


 </>
 )
}

Obe otroški komponenti zahtevata todos stanje, torej TodoContainer podaja obema. V takih scenarijih morate državo narediti čim bolj lokalno. V zgornjem primeru ga postavite znotraj TodosContainer je čim bolj lokalno.

Če bi to stanje postavili v svoje aplikacija komponenta, ne bi bila čim bolj lokalna, ker ni najbližja nadrejena komponentama, ki potrebujeta podatke.

Za velike aplikacije je upravljanje stanja samo z useState() kljuka se lahko izkaže za težavno. V takih primerih se boste morda morali odločiti za React Context API oz React Redux za učinkovito upravljanje države.

Izvedite več o React Hooks

Kavlji tvorijo temelj Reacta. Z uporabo kavljev v Reactu se lahko izognete pisanju dolge kode, ki bi sicer uporabljala razrede. Kavelj useState() je nedvomno najpogosteje uporabljen kavelj React, vendar obstaja veliko drugih, kot so useEffect(), useRef() in useContext().

Če želite postati vešči razvoja aplikacij z Reactom, potem morate vedeti, kako uporabiti te kljuke v svoji aplikaciji.