Lifting State Up: hoe reagerende kindercomponenten communiceren met ouders

React gebruikt een eenrichtingsgegevensstroom van ouder naar kind, nooit van kind naar ouder. Maar wat gebeurt er als een kind met zijn ouder moet communiceren?

Leer hoe u de status kunt opheffen zodat een onderliggende component gegevens naar een bovenliggende component kan verzenden.

Componenten in React

React organiseert componenten in een hiërarchie waarbij onderliggende componenten zich nestelen in bovenliggende componenten. Deze hiërarchie vormt de bouwstenen van de gebruikersinterface van de applicatie.

</ParentComponent>

Elke onderliggende component ontvangt gegevens, ook wel rekwisieten genoemd, van de bovenliggende component. React-rekwisieten kunnen verschillende soorten gegevens bevatten, zoals arrays, objecten, strings of zelfs functies. De onderliggende component kan deze gegevens niet rechtstreeks manipuleren.

Beschouw het volgende onderdeel, genaamd Tegenknop:

const CounterButton = 





instagram viewer

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

De component behoudt een statuswaarde met de naam graaf die toeneemt elke keer dat een gebruiker op de knop klikt.

Stel dat u de CounterButton-component hebt genest in een andere component met de naam Home:

const Home = () => {
return (

 )
}

Als u de telwaarde van de Tegenknop component binnen de Home-component, zou je een uitdaging tegenkomen.

Zoals gezegd dwingt React een unidirectionele gegevensstroom af van ouder naar kind. Daarom kan de component CounterButton de waarde van de telstatus niet rechtstreeks delen met de component Home.

Om dit te omzeilen, moet je de staat optillen.

Hoe u de status kunt verhogen om gegevens tussen componenten te delen

Opheffingsstatus verwijst naar het verplaatsen van de status van een component hoger in de componentenboom, naar een bovenliggende component. Zodra u de status heeft opgeheven, kunt u deze als prop-waarden doorgeven aan onderliggende componenten.

In het tegenvoorbeeld van eerder zou u de telstatus en de handleIncrement functie naar de Home-component. U moet dan de functie handleIncrement als prop doorgeven aan de component CounterButton.

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

{count}</p>
 )
}

Vervolgens moet u de component CounterButton wijzigen om de functie handleIncrement te accepteren en deze aan te roepen wanneer een gebruiker op de knop klikt.

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

Het opheffen van de staat centraliseert de gegevens en draagt ​​de verantwoordelijkheid over het besturen van de staat van het kind naar de ouder.

Naast dat u gegevens in de bovenliggende component kunt weergeven, kan het opheffen van de status u ook helpen gegevens over meerdere componenten te synchroniseren.

Stel dat u een kop- en voettekstcomponent hebt genest in de bovenliggende component en elk van deze componenten geeft ook het gedeelde aantal weer. Om deze waarde te delen, kunt u deze als rekwisieten aan deze componenten doorgeven.

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



 )
}

U moet echter voorzichtig zijn met het optillen van de staat om niet in een situatie terecht te komen die bekend staat als propboren.

De Prop Drilling-uitdaging

Naarmate uw toepassing groeit, zult u merken dat meerdere componenten dieper in de componentenboom toegang nodig hebben tot een gedeelde status. Om deze gedeelde status beschikbaar te maken voor de geneste componenten, moet u rekwisieten doorgeven via tussenliggende componenten. Dit proces kan leiden tot propboren.

Propboren maakt het moeilijk om te volgen hoe de gegevensstromen en kan leiden tot moeilijk te onderhouden code.

Om het boren van props te beperken, maar toch gegevens van verschillende componenten te delen, kunt u overwegen React-context te gebruiken. Met React-context kunt u de status centraliseren, zodat deze in de hele applicatie beschikbaar is.

Gegevens delen in reactie met behulp van rekwisieten

Wanneer u gegevens van een onderliggende component moet delen met de bovenliggende component, verhoog dan de status naar de bovenliggende component en geef vervolgens de functie door die de status bijwerkt naar de onderliggende component als rekwisieten.

In gevallen waarin de onderliggende component diep genest is in de componentenboom, gebruikt u een tool voor statusbeheer zoals React Context of een tool van derden zoals React Redux om prop-boren te voorkomen.