Jak efektivně řídit stav v Reactu

Pokud jste napsali hodně kódu React, je pravděpodobné, že jste stav použili nesprávně. Jednou z běžných chyb, kterou mnoho vývojářů Reactu dělá, je ukládat stavy globálně v aplikaci, místo aby je ukládali do komponent, kde se používají.

Zjistěte, jak můžete refaktorovat svůj kód tak, aby využíval místní stav, a proč je to vždy dobrý nápad.

Základní příklad stavu v Reactu

Zde je velmi jednoduchá aplikace čítače což ilustruje, jak se se stavem obvykle zachází v Reactu:

import {useState} z'reagovat'
import {Čelit} z'čelit'
funkceAplikace(){
konst [count, setCount] = useState(0)
vrátit se<Čelitpočet={počet}setCount={setCount} />
}
vývoznívýchozí Aplikace

Na řádcích 1 a 2 importujete soubor useState() hák pro vytvoření státu, a Čelit komponent. Vy definujete počet stát a setCount způsob aktualizace stavu. Potom oba předáte dolů do Čelit komponent.

The Čelit komponenta pak vykreslí počet a volání setCount pro zvýšení a snížení počtu.

funkceČelit({count, setCount}) {
vrátit se (


 setCount(předchozí => předchozí - 1)}>-</button>
{count}</span>
 setCount(předchozí => předchozí + 1)}>+</button>
 </div>
 )
}

Nedefinoval jsi počet variabilní a setCount fungovat lokálně uvnitř Čelit komponent. Spíše jste jej předali z nadřazené komponenty (Aplikace). Jinými slovy, používáte globální stav.

Problém s globálními státy

Problém s použitím globálního stavu je v tom, že stav ukládáte do nadřazené komponenty (nebo nadřazené komponenty) a poté předat to jako rekvizity ke komponentě, kde je tento stav skutečně potřeba.

Někdy je to v pořádku, když máte stav sdílený mnoha komponentami. Ale v tomto případě se o to žádná jiná složka nestará počet stát kromě toho Čelit komponent. Proto je lepší přesunout stav do Čelit komponentu, kde se skutečně používá.

Přesun státu do dětské složky

Když přesunete stát do Čelit komponenta, bude to vypadat takto:

import {useState} z'reagovat'
funkceČelit() {
konst [count, setCount] = useState(0)
vrátit se (


 setCount(předchozí => předchozí - 1)}>-</button>
{count}</span>
 setCount(předchozí => předchozí + 1)}>+</button>
 </div>
 )
}

Pak uvnitř vašeho Aplikace komponentu, nemusíte nic předávat Čelit komponent:

// importy
funkceAplikace(){
vrátit se<Čelit />
}

Čítač bude fungovat úplně stejně jako předtím, ale velký rozdíl je v tom, že všechny vaše stavy jsou lokálně uvnitř tohoto Čelit komponent. Pokud tedy potřebujete mít na domovské stránce další počítadlo, měli byste dva nezávislé počítadla. Každý čítač je samostatný a stará se o celý svůj vlastní stav.

Manipulace se stavem ve složitějších aplikacích

Další situace, kdy byste použili globální stav, je s formuláři. The Aplikace níže uvedená komponenta předává data formuláře (e-mail a heslo) a metodu nastavení dolů do Přihlašovací formulář komponent.

import { useState } z"reagovat";
import { Přihlašovací formulář } z"./Přihlašovací formulář";
funkceAplikace() {
konst [formData, setFormData] = useState({
 e-mailem: "",
 Heslo: "",
 });
funkceupdateFormData(newData) {
 setFormData((předchozí) => {
vrátit se { ...předchozí, ...nováData };
 });
 }
funkcena Odeslat() {
řídicí panel.log (formData);
 }
vrátit se (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Přihlašovací formulář komponenta převezme přihlašovací údaje a vykreslí je. Když formulář odešlete, zavolá aktualizovat data funkce, která je také předána z nadřazené komponenty.

funkcePřihlašovací formulář({ onSubmit, data, updateData }) {
funkcehandleSubmit(E) {
 e.preventDefault();
 onSubmit();
 }
vrátit se (


"e-mailem">E-mail</label>
 typ="e-mailem"
 id="e-mailem"
 value={data.email}
 onChange={(e) => updateData({ e-mailem: e.target.value})}
 />
"Heslo">Heslo</label>
 typ="Heslo"
 id="Heslo"
 value={data.password}
 onChange={(e) => updateData({ Heslo: e.target.value})}
 />
"Předložit">Odeslat</button>
 </form>
 );
}

Spíše než spravovat stav na nadřazené komponentě je lepší stav přesunout LoginForm.js, kde kód použijete. Pokud tak učiníte, každá komponenta bude samostatná a nebude závislá na jiné komponentě (tj. nadřazené) pro data. Zde je upravená verze Přihlašovací formulář:

import { useRef } z"reagovat";
funkcePřihlašovací formulář({ onSubmit }) {
konst emailRef = useRef();
konst passwordRef = useRef();

funkcehandleSubmit(E) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 heslo: passwordRef.current.value,
 });
 }
vrátit se (


"e-mailem">E-mail</label>
"e-mailem" id="e-mailem" ref={emailRef} />
"Heslo">Heslo</label>
"Heslo" id="Heslo" ref={passwordRef} />
"Předložit">Odeslat</button>
 </form>
 );
}

Zde navážete vstup na proměnnou pomocí ref atributy a useRef React hook, spíše než přímé předávání metod aktualizace. To vám pomůže odstranit podrobný kód a optimalizujte výkon formuláře pomocí háku useRef.

V nadřazené komponentě (App.js), můžete odstranit jak globální stav, tak i updateFormData() metodu, protože ji již nepotřebujete. Zbývá pouze funkce onSubmit(), kterou vyvoláte zevnitř Přihlašovací formulář komponenta pro přihlášení přihlašovacích údajů do konzole.

funkceAplikace() {
funkcena Odeslat(formData) {
řídicí panel.log (formData);
 }
vrátit se (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Nejen, že jste udělali svůj stát co nejlokálnějším, ale ve skutečnosti jste odstranili potřebu jakéhokoli státu vůbec (a používali ref namísto). Takže vaše Aplikace komponenta se výrazně zjednodušila (má pouze jednu funkci).

Vaše Přihlašovací formulář komponenta se také zjednodušila, protože jste se nemuseli starat o aktualizaci stavu. Spíše stačí sledovat dva ref, a to je vše.

Manipulace se sdíleným stavem

Je tu jeden problém s přístupem, kdy se snaží stát co nejvíce místní. Často se setkáte se scénáři, kdy nadřazená komponenta stav nepoužívá, ale předává jej více komponentám.

Příkladem je mít a TodoContainer nadřazená komponenta se dvěma podřízenými komponentami: Seznam úkolů a TodoCount.

funkceTodoContainer() {
konst [todos, setTodos] = useState([])
vrátit se (
 <>


 </>
 )
}

Obě tyto podřízené součásti vyžadují todos stát, takže TodoContainer předá to oběma. Ve scénářích, jako jsou tyto, musíte stát co nejvíce místní. Ve výše uvedeném příkladu, vložení dovnitř TodosContainer je tak místní, jak jen můžete získat.

Pokud byste tento stav dali do svého Aplikace komponenta, nebude tak lokální, jak je to jen možné, protože to není nejbližší rodič ke dvěma komponentám, které potřebují data.

U velkých aplikací, správa stavu pouze pomocí useState() hák se může ukázat jako obtížný. V takových případech se možná budete muset rozhodnout pro React Kontextové API nebo Reagovat Redux efektivně řídit stát.

Zjistěte více o React Hooks

Háčky tvoří základ Reactu. Použitím háčků v Reactu se můžete vyhnout psaní zdlouhavého kódu, který by jinak používal třídy. Háček useState() je bezpochyby nejběžněji používaným háčkem React, ale existuje mnoho dalších, jako například useEffect(), useRef() a useContext().

Pokud se chcete stát zdatnými ve vývoji aplikací s Reactem, musíte vědět, jak tyto háčky ve své aplikaci používat.