Lifting State Up: Jak React Child Components Komunikují s rodiči

React používá jednosměrný tok dat od rodiče k dítěti, nikdy od dítěte k rodiči. Co se ale stane, když dítě potřebuje komunikovat se svým rodičem?

Přečtěte si, jak zrušit stav, aby podřízená komponenta mohla odesílat data do nadřazené komponenty.

Komponenty v Reactu

React organizuje komponenty v hierarchii, kde se podřízené komponenty vnořují do nadřazených komponent. Tato hierarchie tvoří stavební kameny uživatelského rozhraní aplikace.

</ParentComponent>

Každá podřízená komponenta přijímá data, známá jako rekvizity, od své nadřazené komponenty. React podpěry mohou obsahovat různé typy dat, jako jsou pole, objekty, řetězce nebo dokonce funkce. Podřízená komponenta nemůže s těmito daty přímo manipulovat.

Zvažte následující komponentu, tzv CounterButton:

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

Komponenta udržuje hodnotu stavu s názvem

počet který se zvyšuje pokaždé, když uživatel klikne na tlačítko.

Předpokládejme, že jste vnořili komponentu CounterButton do jiné komponenty s názvem Home:

const Home = () => {
return (

 )
}

Pokud jste chtěli zobrazit hodnotu počtu z CounterButton uvnitř komponenty Home, narazíte na problém.

Jak již bylo zmíněno, React vynucuje jednosměrný tok dat od rodiče k potomkovi. Komponenta CounterButton proto nemůže přímo sdílet hodnotu stavu počítání s komponentou Home.

Chcete-li to obejít, musíte zvednout stav.

Jak zvednout stav a sdílet data mezi komponentami

Stav zvedání se týká přesunutí stavu komponenty výše ve stromu komponenty do nadřazené komponenty. Jakmile stav zvednete, můžete jej předat podřízeným komponentám jako hodnoty prop.

V předchozím příkladu čítače byste museli přesunout stav počtu a handleIncrement funkce ke komponentě Home. Potom byste museli předat funkci handleIncrement komponentě CounterButton jako podpěru.

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

{count}</p>
 )
}

Dále musíte upravit komponentu CounterButton, aby přijala funkci handleIncrement a vyvolala ji, když uživatel klikne na tlačítko.

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

Zrušení stavu centralizuje data a přenáší odpovědnost řízení státu od dítěte k rodiči.

Kromě toho, že vám pomůže zobrazit data v nadřazené komponentě, může vám zrušení stavu pomoci synchronizovat data mezi více komponentami.

Předpokládejme, že jste měli komponentu Záhlaví a zápatí vnořenou do nadřazené komponenty a každá z těchto komponent také zobrazuje sdílený počet. Chcete-li tuto hodnotu sdílet, můžete ji předat těmto komponentám jako rekvizity.

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



 )
}

Musíte však být opatrní při zvedání stavu, abyste neskončili v situaci známé jako prop drilling.

Výzva pro vrtání podpěr

Jak vaše aplikace roste, můžete zjistit, že více komponent hlouběji ve stromu komponent potřebuje přístup ke sdílenému stavu. Chcete-li tento sdílený stav zpřístupnit vnořeným komponentám, musíte předat rekvizity přes zprostředkující komponenty. Tento proces může vést k vrtání podpěr.

Prop drilling znesnadňuje sledování, jak tok dat a může vést k obtížně udržovatelnému kódu.

Chcete-li zmírnit vrtání podpěr, ale stále sdílet data z různých komponent, zvažte použití kontextu React. Kontext React vám umožňuje centralizovat stav tak, aby byl dostupný v celé aplikaci.

Sdílení dat v Reactu pomocí rekvizit

Když potřebujete sdílet data z podřízené komponenty s její nadřazenou komponentou, povyšte stav na nadřazenou komponentu a poté funkci, která aktualizuje stav, předejte podřízené komponentě jako podpěry.

V případech, kdy je podřízená komponenta hluboce vnořena do stromu komponenty, použijte nástroj pro správu stavu, jako je React Context, nebo nástroj třetí strany, jako je React Redux, abyste zabránili vrtání podpěr.