Podnoszenie stanu w górę: jak reagują komponenty potomne komunikujące się z rodzicami

React wykorzystuje jednokierunkowy przepływ danych od rodzica do dziecka, nigdy od dziecka do rodzica. Ale co się stanie, gdy dziecko będzie musiało porozumieć się z rodzicem?

Dowiedz się, jak podnieść stan, aby umożliwić komponentowi podrzędnemu wysyłanie danych do komponentu nadrzędnego.

Komponenty w React

React organizuje komponenty w hierarchię, w której komponenty potomne są zagnieżdżone w komponentach nadrzędnych. Hierarchia ta stanowi elementy składowe interfejsu użytkownika aplikacji.

</ParentComponent>

Każdy komponent podrzędny otrzymuje dane zwane rekwizytami od swojego komponentu nadrzędnego. Rekwizyty React mogą przechowywać różne typy danych, takie jak tablice, obiekty, ciągi znaków, a nawet funkcje. Komponent podrzędny nie może bezpośrednio manipulować tymi danymi.

Rozważmy następujący komponent, tzw Przycisk Kontra:

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

Komponent przechowuje wartość stanu o nazwie liczyć która zwiększa się za każdym razem, gdy użytkownik kliknie przycisk.

Załóżmy, że zagnieżdżono komponent CounterButton w innym komponencie o nazwie Home:

const Home = () => {
return (

 )
}

Jeśli chcesz wyświetlić wartość licznika z Przycisk Kontra komponent wewnątrz komponentu Home, napotkasz wyzwanie.

Jak wspomniano, React wymusza jednokierunkowy przepływ danych od rodzica do dziecka. Dlatego składnik CounterButton nie może bezpośrednio współdzielić wartości stanu licznika ze składnikiem Home.

Aby to obejść, trzeba podnieść stan.

Jak podnieść stan, aby udostępnić dane między komponentami

Podnoszenie stanu odnosi się do przenoszenia stanu komponentu wyżej w drzewie komponentów, do komponentu nadrzędnego. Po podniesieniu stanu możesz przekazać go komponentom potomnym jako wartości właściwości.

W wcześniejszym przykładzie licznika musiałbyś przenieść stan licznika i uchwytPrzyrost funkcję do komponentu Home. Następnie musiałbyś przekazać funkcję handleInkrement do komponentu CounterButton jako rekwizyt.

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

{count}</p>
 )
}

Następnie musisz zmodyfikować komponent CounterButton, aby zaakceptował funkcję handleInkrement i wywołał ją, gdy użytkownik kliknie przycisk.

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

Podniesienie stanu centralizuje dane i przenosi odpowiedzialność zarządzanie państwem od dziecka do rodzica.

Oprócz pomocy w wyświetlaniu danych w komponencie nadrzędnym, podniesienie stanu może pomóc w synchronizacji danych pomiędzy wieloma komponentami.

Załóżmy, że komponent Nagłówek i Stopka jest zagnieżdżony w komponencie nadrzędnym i każdy z tych komponentów wyświetla również liczbę udostępnionych elementów. Aby udostępnić tę wartość, możesz przekazać ją tym komponentom jako rekwizyty.

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



 )
}

Trzeba jednak zachować ostrożność podczas podnoszenia stanu, aby nie doprowadzić do sytuacji zwanej wierceniem podporowym.

Wyzwanie związane z wierceniem podporowym

W miarę rozwoju aplikacji może się okazać, że wiele komponentów znajdujących się głębiej w drzewie komponentów potrzebuje dostępu do wspólnego stanu. Aby udostępnić ten stan współdzielony zagnieżdżonym komponentom, należy przekazać właściwości przez komponenty pośrednie. Proces ten może prowadzić do wiercenia podpór.

Wiercenie podpór utrudnia śledzenie przepływu danych i może prowadzić do powstania kodu trudnego w utrzymaniu.

Aby ograniczyć wiercenie podpór, ale nadal udostępniać dane z różnych komponentów, rozważ użycie kontekstu React. Kontekst React pozwala scentralizować stan tak, aby był dostępny w całej aplikacji.

Udostępnianie danych w reakcji za pomocą rekwizytów

Jeśli chcesz udostępnić dane z komponentu podrzędnego jego komponentowi nadrzędnemu, podnieś stan do komponentu nadrzędnego, a następnie przekaż funkcję aktualizującą stan do komponentu podrzędnego jako właściwości.

W przypadkach, gdy komponent potomny jest głęboko zagnieżdżony w drzewie komponentów, użyj narzędzia do zarządzania stanem, takiego jak React Context lub narzędzia innej firmy, takiego jak React Redux, aby zapobiec drążeniu podpór.