Creșterea stării: cum comunică componentele copilului React cu părinții

React utilizează un flux de date unidirecțional de la părinte la copil, niciodată de la copil la părinte. Dar ce se întâmplă atunci când un copil trebuie să comunice cu părintele său?

Aflați cum să ridicați starea pentru a permite unei componente secundare să trimită date către o componentă părinte.

Componente în React

React organizează componentele într-o ierarhie în care componentele secundare se cuibăresc în componentele părinte. Această ierarhie formează blocurile de bază ale interfeței cu utilizatorul aplicației.

</ParentComponent>

Fiecare componentă copil primește date, cunoscute sub numele de elemente de recuzită, de la componenta părinte. Elementele de recuzită React pot conține diferite tipuri de date, cum ar fi matrice, obiecte, șiruri de caractere sau chiar funcții. Componenta copil nu poate manipula direct aceste date.

Luați în considerare următoarea componentă, numită CounterButton:

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

Componenta menține o valoare de stare numită numara care crește de fiecare dată când un utilizator dă clic pe buton.

Să presupunem că ați imbricat componenta CounterButton într-o altă componentă numită Home:

const Home = () => {
return (

 )
}

Dacă doriți să afișați valoarea de numărare din CounterButton componentă din interiorul componentei Acasă, veți întâmpina o provocare.

După cum sa menționat, React impune un flux de date unidirecțional de la părinte la copil. Prin urmare, componenta CounterButton nu poate partaja direct valoarea stării de numărare cu componenta Home.

Pentru a ocoli acest lucru, trebuie să ridicați starea.

Cum să ridicați starea pentru a partaja date între componente

Starea de ridicare se referă la mutarea stării unei componente mai sus în arborele componente, la o componentă părinte. Odată ce ridicați starea, o puteți transmite componentelor secundare ca valori prop.

În exemplul de contor de mai devreme, ar trebui să mutați starea de numărare și handleIncrement funcția către componenta Acasă. Ar trebui apoi să treceți funcția handleIncrement la componenta CounterButton ca prop.

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

{count}</p>
 )
}

Apoi, trebuie să modificați componenta CounterButton pentru a accepta funcția handleIncrement și a o apela atunci când un utilizator face clic pe buton.

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

Ridicarea statului centralizează datele și transferă responsabilitatea gestionarea statului de la copil la părinte.

Pe lângă faptul că vă ajută să afișați date în componenta părinte, ridicarea stării vă poate ajuta să sincronizați datele între mai multe componente.

Să presupunem că aveți o componentă Antet și Subsol imbricate în componenta părinte și fiecare dintre aceste componente afișează, de asemenea, numărul partajat. Pentru a împărtăși această valoare, o puteți transmite acestor componente ca elemente de recuzită.

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



 )
}

Cu toate acestea, trebuie să fii atent la ridicarea stării pentru a nu ajunge într-o situație cunoscută sub numele de foraj cu prop.

Provocarea Forajului Prop

Pe măsură ce aplicația dvs. crește, este posibil să descoperiți că mai multe componente mai adânci în arborele de componente au nevoie de acces la o stare partajată. Pentru a face această stare partajată disponibilă pentru componentele imbricate, va trebui să treceți elementele de recuzită prin componente intermediare. Acest proces poate duce la forarea prop.

Forarea cu ele îngreunează urmărirea modului în care fluxul de date și poate duce la un cod greu de întreținut.

Pentru a atenua forarea prop, dar totuși să partajați date de la mai multe componente, luați în considerare utilizarea contextului React. Contextul React vă permite să centralizați starea, astfel încât să fie disponibilă în întreaga aplicație.

Partajarea datelor în React folosind elemente de recuzită

Când trebuie să partajați date dintr-o componentă copil cu componenta părinte, ridicați starea la componenta părinte, apoi transmiteți funcția care actualizează starea componentului copil ca elemente de recuzită.

În cazurile în care componenta copil este profund imbricată în arborele componente, utilizați un instrument de gestionare a stării precum React Context sau un instrument terță parte, cum ar fi React Redux, pentru a preveni forarea prop.