Dvig stanja navzgor: Kako reagirajo otroške komponente komunicirajo s starši

React uporablja enosmerni pretok podatkov od starša k otroku, nikoli od otroka k staršu. Toda kaj se zgodi, ko mora otrok komunicirati s svojim staršem?

Naučite se dvigniti stanje, da omogočite podrejeni komponenti pošiljanje podatkov nadrejeni komponenti.

Komponente v Reactu

React organizira komponente v hierarhiji, kjer podrejene komponente gnezdijo znotraj nadrejenih komponent. Ta hierarhija tvori gradnike uporabniškega vmesnika aplikacije.

</ParentComponent>

Vsaka podrejena komponenta prejme podatke, znane kot rekviziti, od svoje nadrejene komponente. React props lahko vsebujejo različne vrste podatkov, kot so polja, objekti, nizi ali celo funkcije. Podrejena komponenta ne more neposredno manipulirati s temi podatki.

Razmislite o naslednji komponenti, imenovani CounterButton:

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

Komponenta vzdržuje vrednost stanja z imenom štetje ki se poveča vsakič, ko uporabnik klikne gumb.

Recimo, da ste komponento CounterButton ugnezdili znotraj druge komponente z imenom Home:

const Home = () => {
return (

 )
}

Če želite prikazati vrednost števca iz CounterButton komponento znotraj komponente Home, bi naleteli na izziv.

Kot že omenjeno, React uveljavlja enosmerni pretok podatkov od starša k otroku. Zato komponenta CounterButton ne more neposredno deliti vrednosti stanja štetja s komponento Home.

Če želite to zaobiti, morate dvigniti državo.

Kako povečati stanje za skupno rabo podatkov med komponentami

Stanje dviga se nanaša na premik stanja komponente višje v drevesu komponent, na nadrejeno komponento. Ko dvignete stanje, ga lahko prenesete na podrejene komponente kot vrednosti prop.

V prejšnjem primeru števca bi morali premakniti stanje štetja in handleIncrement funkcijo za domačo komponento. Nato bi morali posredovati funkcijo handleIncrement komponenti CounterButton kot prop.

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

{count}</p>
 )
}

Nato morate spremeniti komponento CounterButton, da sprejme funkcijo handleIncrement in jo pokliče, ko uporabnik klikne gumb.

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

Dvig države centralizira podatke in prenese odgovornost na upravljanje države od otroka do starša.

Poleg tega, da vam pomaga prikazati podatke v nadrejeni komponenti, vam lahko dvig stanja pomaga sinhronizirati podatke v več komponentah.

Recimo, da ste imeli komponento glave in noge ugnezdeno znotraj nadrejene komponente in vsaka od teh komponent prikazuje tudi skupno število. Če želite deliti to vrednost, jo lahko posredujete tem komponentam kot rekvizite.

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



 )
}

Vendar pa morate biti previdni pri dvigovanju stanja, da ne bi prišli v situacijo, znano kot propelersko vrtanje.

Izziv vrtanja z oporniki

Ko vaša aplikacija raste, boste morda ugotovili, da več komponent globlje v drevesu komponent potrebuje dostop do skupnega stanja. Če želite, da bo to stanje v skupni rabi na voljo ugnezdenim komponentam, boste morali posredovati rekvizite prek vmesnih komponent. Ta postopek lahko privede do opornega vrtanja.

Prop vrtanje otežuje sledenje pretoku podatkov in lahko povzroči kodo, ki jo je težko vzdrževati.

Če želite ublažiti oporno vrtanje, vendar še vedno deliti podatke iz različnih komponent, razmislite o uporabi konteksta React. Kontekst React vam omogoča centralizacijo stanja, tako da je na voljo v celotni aplikaciji.

Skupna raba podatkov v Reactu z uporabo rekvizitov

Ko morate podatke iz podrejene komponente deliti z njeno nadrejeno komponento, povzdignite stanje na nadrejeno komponento in nato posredujte funkcijo, ki posodablja stanje podrejeni komponenti kot rekvizite.

V primerih, ko je podrejena komponenta globoko ugnezdena v drevesu komponent, uporabite orodje za upravljanje stanja, kot je React Context, ali orodje tretje osebe, kot je React Redux, da preprečite vrtanje opornikov.