Lifting State Up: Ako React Child Components Komunikujú s rodičmi

React používa jednosmerný tok údajov od rodiča k dieťaťu, nikdy nie od dieťaťa k rodičovi. Čo sa však stane, keď dieťa potrebuje komunikovať so svojím rodičom?

Zistite, ako zrušiť stav, aby ste umožnili podriadenému komponentu odosielať údaje nadradenému komponentu.

Komponenty v React

React organizuje komponenty v hierarchii, kde sú podradené komponenty vnorené do rodičovských komponentov. Táto hierarchia tvorí stavebné bloky používateľského rozhrania aplikácie.

</ParentComponent>

Každý podradený komponent prijíma údaje, známe ako rekvizity, od svojho nadradeného komponentu. React rekvizity môžu obsahovať rôzne typy údajov, ako sú polia, objekty, reťazce alebo dokonca funkcie. Podradený komponent nemôže priamo manipulovať s týmito údajmi.

Zvážte nasledujúci komponent, tzv CounterButton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Komponent si zachováva hodnotu stavu s názvom počítať ktorý sa zvyšuje vždy, keď používateľ klikne na tlačidlo.

Predpokladajme, že ste vnorili komponent CounterButton do iného komponentu s názvom Home:

const Home = () => {
return (

 )
}

Ak chcete zobraziť hodnotu počtu z CounterButton v rámci komponentu Home, narazíte na problém.

Ako už bolo spomenuté, React presadzuje jednosmerný tok údajov od rodiča k dieťaťu. Preto komponent CounterButton nemôže priamo zdieľať hodnotu stavu počtu s komponentom Home.

Aby ste to obišli, musíte zdvihnúť stav.

Ako pozdvihnúť stav na zdieľanie údajov medzi komponentmi

Stav zdvíhania sa vzťahuje na presunutie stavu komponentu vyššie v strome komponentu do nadradeného komponentu. Keď stav zrušíte, môžete ho odovzdať podriadeným komponentom ako hodnoty podpery.

V príklade počítadla z predchádzajúceho by ste museli presunúť stav počtu a handleIncrement funkcie na komponent Home. Potom by ste museli odovzdať funkciu handleIncrement komponentu CounterButton ako rekvizitu.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Ďalej musíte upraviť komponent CounterButton tak, aby akceptoval funkciu handleIncrement a vyvolal ju, keď používateľ klikne na tlačidlo.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Zrušenie štátu centralizuje údaje a prenáša zodpovednosť za riadenie štátu od dieťaťa k rodičovi.

Okrem toho, že vám pomôže zobraziť údaje v nadradenom komponente, zrušenie stavu vám môže pomôcť synchronizovať údaje medzi viacerými komponentmi.

Predpokladajme, že ste mali komponent Hlavička a Päta vnorený do nadradeného komponentu a každý z týchto komponentov tiež zobrazuje zdieľaný počet. Ak chcete zdieľať túto hodnotu, môžete ju odovzdať týmto komponentom ako rekvizitu.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Pri zdvíhaní stavu si však treba dávať pozor, aby ste sa nedostali do situácie známej ako vŕtanie vrtule.

Výzva na vŕtanie vrtule

Ako vaša aplikácia rastie, môžete zistiť, že viaceré komponenty hlbšie v strome komponentov potrebujú prístup k zdieľanému stavu. Ak chcete sprístupniť tento zdieľaný stav pre vnorené komponenty, musíte prejsť rekvizity cez sprostredkovateľské komponenty. Tento proces môže viesť k podpernému vŕtaniu.

Vŕtanie rekvizít sťažuje sledovanie toku údajov a môže viesť k ťažko udržiavateľnému kódu.

Ak chcete zmierniť vŕtanie podpier, ale stále zdieľať údaje z rôznych komponentov, zvážte použitie kontextu React. Kontext React vám umožňuje centralizovať stav tak, aby bol dostupný v celej aplikácii.

Zdieľanie údajov v React pomocou rekvizít

Keď potrebujete zdieľať údaje z podradeného komponentu s jeho nadradeným komponentom, povýšte stav na nadradený komponent a potom odovzdajte funkciu, ktorá aktualizuje stav podriadenému komponentu ako rekvizitu.

V prípadoch, keď je podradený komponent hlboko vnorený v strome komponentu, použite nástroj na správu stavu, ako je React Context, alebo nástroj tretej strany, ako je React Redux, aby ste zabránili vŕtaniu podpier.