Podizanje stanja: Kako komponente djeteta reagiraju na komunikaciju s roditeljima

React koristi jednosmjerni protok podataka od roditelja do djeteta, nikada od djeteta do roditelja. Ali što se događa kada dijete treba komunicirati sa svojim roditeljem?

Naučite kako podići stanje da omogućite podređenoj komponenti slanje podataka nadređenoj komponenti.

Komponente u Reactu

React organizira komponente u hijerarhiji gdje se podređene komponente ugnijezde unutar nadređenih komponenti. Ova hijerarhija čini građevne blokove korisničkog sučelja aplikacije.

</ParentComponent>

Svaka podređena komponenta prima podatke, poznate kao props, od svoje roditeljske komponente. React props može sadržavati različite vrste podataka kao što su nizovi, objekti, nizovi ili čak funkcije. Dijete komponenta ne može izravno manipulirati ovim podacima.

Razmotrimo sljedeću komponentu tzv CounterButton:

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

Komponenta održava vrijednost stanja pod nazivom računati koji se povećava svaki put kada korisnik klikne gumb.

Pretpostavimo da ste komponentu CounterButton ugniježdili unutar druge komponente pod nazivom Početna:

const Home = () => {
return (

 )
}

Ako želite prikazati vrijednost brojača iz CounterButton komponentu unutar komponente Početna, naišli biste na izazov.

Kao što je spomenuto, React nameće jednosmjerni protok podataka od roditelja do djeteta. Stoga komponenta CounterButton ne može izravno dijeliti vrijednost stanja brojanja s komponentom Home.

Da biste to riješili, morate podići državu.

Kako podići stanje za dijeljenje podataka između komponenti

Stanje podizanja odnosi se na pomicanje stanja komponente više u stablu komponente, na nadređenu komponentu. Nakon što podignete stanje, možete ga proslijediti podređenim komponentama kao vrijednosti potpore.

U primjeru brojača od ranije, trebali biste premjestiti stanje brojanja i handleIncrement funkciju na početnu komponentu. Tada biste morali proslijediti funkciju handleIncrement komponenti CounterButton kao pomoćnu komponentu.

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

{count}</p>
 )
}

Zatim trebate modificirati komponentu CounterButton da prihvati funkciju handleIncrement i pozove je kada korisnik klikne gumb.

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

Podizanje države centralizira podatke i prenosi odgovornost na upravljanje državom od djeteta do roditelja.

Osim što vam pomaže prikazati podatke u nadređenoj komponenti, podizanje stanja može vam pomoći da sinkronizirate podatke u više komponenti.

Pretpostavimo da ste imali komponentu zaglavlja i podnožja ugniježđene unutar nadređene komponente i svaka od tih komponenti također prikazuje dijeljeni broj. Da biste podijelili ovu vrijednost, možete je proslijediti ovim komponentama kao rekvizite.

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



 )
}

Međutim, morate biti oprezni s dizanjem stanja kako ne biste završili u situaciji poznatoj kao propelersko bušenje.

Izazov podupiračkog bušenja

Kako vaša aplikacija raste, mogli biste otkriti da više komponenti dublje u stablu komponenti trebaju pristup zajedničkom stanju. Da biste ovo zajedničko stanje učinili dostupnim ugniježđenim komponentama, morali biste proslijediti rekvizite kroz posredničke komponente. Ovaj proces može dovesti do propelernog bušenja.

Prop bušenje otežava praćenje protoka podataka i može dovesti do koda koji je težak za održavanje.

Kako biste ublažili propelersko bušenje, ali i dalje dijelili podatke iz različitih komponenti, razmislite o korištenju React konteksta. React kontekst vam omogućuje da centralizirate stanje tako da bude dostupno u cijeloj aplikaciji.

Dijeljenje podataka u Reactu pomoću rekvizita

Kada trebate dijeliti podatke iz podređene komponente s njenom nadređenom komponentom, podignite stanje na nadređenu komponentu, a zatim proslijedite funkciju koja ažurira stanje na podređenu komponentu kao rekvizite.

U slučajevima kada je podređena komponenta duboko ugniježđena u stablu komponente, upotrijebite alat za upravljanje stanjem kao što je React Context ili alat treće strane kao što je React Redux da biste spriječili bušenje podupirača.