Lifting State Up: Miten lapsikomponentit reagoivat kommunikointiin vanhempien kanssa

React käyttää yksisuuntaista tiedonkulkua vanhemmalta lapselle, ei koskaan lapselta vanhemmalle. Mutta mitä tapahtuu, kun lapsen on kommunikoitava vanhempansa kanssa?

Opi nostamaan tilaa, jotta alikomponentti voi lähettää tietoja yläkomponentille.

Komponentit Reactissa

React järjestää komponentit hierarkiaan, jossa alikomponentit ovat sisäkkäin emokomponenttien sisällä. Tämä hierarkia muodostaa sovelluksen käyttöliittymän rakennuspalikoita.

</ParentComponent>

Jokainen alikomponentti vastaanottaa dataa, joka tunnetaan nimellä rekvisiitta, emokomponentistaan. Reaktio-osat voivat sisältää erilaisia ​​tietoja, kuten taulukoita, objekteja, merkkijonoja tai jopa funktioita. Lapsikomponentti ei voi suoraan käsitellä näitä tietoja.

Harkitse seuraavaa komponenttia, ns CounterButton:

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

Komponentti säilyttää tila-arvon nimeltä Kreivi joka kasvaa aina, kun käyttäjä napsauttaa painiketta.

Oletetaan, että sisäkkäsit CounterButton-komponentin toiseen komponenttiin nimeltä Home:

const Home = () => {
return (

 )
}

Jos halusit näyttää laskenta-arvon CounterButton Home-komponentin sisällä, kohtaat haasteen.

Kuten mainittiin, React pakottaa yksisuuntaisen tietovirran vanhemmalta lapselle. Siksi CounterButton-komponentti ei voi suoraan jakaa laskentatilan arvoa Home-komponentin kanssa.

Tämän kiertämiseksi sinun on nostettava tilaa.

Tilan nostaminen tietojen jakamiseksi komponenttien välillä

Nostotila tarkoittaa komponentin tilan siirtämistä ylemmäs komponenttipuussa, pääkomponenttiin. Kun nostat tilan, voit välittää sen alatason komponenteille prop-arvoina.

Aiemmassa laskuriesimerkissä sinun on siirrettävä laskentatilaa ja HandIncrement toiminto Home-komponenttiin. Sinun on sitten välitettävä handleIncrement-funktio CounterButton-komponentille ehdotuksena.

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

{count}</p>
 )
}

Seuraavaksi sinun on muokattava CounterButton-komponenttia hyväksymään handleIncrement-funktio ja kutsuttava sitä, kun käyttäjä napsauttaa painiketta.

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

Valtion nostaminen keskittää tiedot ja siirtää vastuun hallita valtiota lapsesta vanhemmalle.

Sen lisäksi, että tilan poistaminen auttaa sinua näyttämään tietoja pääkomponentissa, se voi auttaa sinua synkronoimaan tietoja useiden komponenttien välillä.

Oletetaan, että ylä- ja alatunnistekomponentti on sijoitettu pääkomponentin sisään ja jokainen näistä komponenteista näyttää myös jaetun määrän. Jos haluat jakaa tämän arvon, voit välittää sen näille komponenteille rekvisiittana.

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



 )
}

Sinun on kuitenkin oltava varovainen nostaessasi tilaa, jotta et päädy tilanteeseen, joka tunnetaan nimellä potkuriporaus.

Prop Drilling Challenge

Sovelluksesi kasvaessa saatat huomata, että useat komponenttipuun syvemmällä olevat komponentit tarvitsevat pääsyn jaettuun tilaan. Jotta tämä jaettu tila olisi sisäkkäisten komponenttien käytettävissä, sinun on ohjattava rekvisiitta välikomponenttien kautta. Tämä prosessi voi johtaa potkuriporaukseen.

Prop-poraus vaikeuttaa tietojen kulkua ja voi johtaa vaikeasti ylläpidettävään koodiin.

Harkitse React-kontekstin käyttöä, jos haluat vähentää potkuriporausta mutta silti jakaa tietoja eri komponenteista. React-kontekstin avulla voit keskittää tilan niin, että se on käytettävissä koko sovelluksessa.

Datan jakaminen Reactissa Propsin avulla

Kun haluat jakaa tietoja alikomponentista sen pääkomponentin kanssa, nosta tila yläkomponenttiin ja välitä sitten tilan päivittävä toiminto alikomponentille rekvisiittana.

Tapauksissa, joissa alikomponentti on syvällä sisäkkäin komponenttipuussa, käytä tilanhallintatyökalua, kuten React Context, tai kolmannen osapuolen työkalua, kuten React Redux, estämään potkuriporaukset.