Būsenos pakėlimas: kaip reaguoja vaiko komponentai, bendraujantys su tėvais

„React“ naudoja vienpusį duomenų srautą iš tėvų į vaiką, niekada iš vaiko į tėvą. Bet kas nutinka, kai vaikui reikia bendrauti su tėvais?

Sužinokite, kaip pakeisti būseną, kad antrinis komponentas galėtų siųsti duomenis pirminiam komponentui.

„React“ komponentai

„React“ tvarko komponentus hierarchijoje, kurioje antriniai komponentai yra pirminiuose komponentuose. Ši hierarchija sudaro programos vartotojo sąsajos blokus.

</ParentComponent>

Kiekvienas antrinis komponentas gauna duomenis, vadinamus rekvizitais, iš pirminio komponento. „React“ rekvizitai gali turėti įvairių tipų duomenis, pvz., masyvus, objektus, eilutes ar net funkcijas. Antrinis komponentas negali tiesiogiai manipuliuoti šiais duomenimis.

Apsvarstykite šį komponentą, vadinamą CounterButton:

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

Komponentas palaiko būsenos reikšmę pavadinimu skaičiuoti kuris didėja kiekvieną kartą vartotojui spustelėjus mygtuką.

Tarkime, kad CounterButton komponentą įdėjote į kitą komponentą, pavadintą Home:

const Home = () => {
return (

 )
}

Jei norite rodyti skaičiavimo reikšmę iš CounterButton komponento Home komponente, susidursite su iššūkiu.

Kaip minėta, „React“ užtikrina vienakryptį duomenų srautą iš tėvų į vaiką. Todėl komponentas CounterButton negali tiesiogiai bendrinti skaičiavimo būsenos vertės su pagrindiniu komponentu.

Norėdami tai apeiti, turite pakelti būseną.

Kaip padidinti būseną, kad būtų galima dalytis duomenimis tarp komponentų

Kėlimo būsena reiškia komponento būsenos perkėlimą aukščiau komponento medžio į pirminį komponentą. Kai pakelsite būseną, galėsite perduoti ją antriniams komponentams kaip atramos vertes.

Ankstesniame skaitiklio pavyzdyje turėtumėte perkelti skaičiavimo būseną ir rankenaPriaugimas funkcija Home komponentui. Tada jums reikės perduoti HandIncrement funkciją komponentui CounterButton kaip atramą.

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

{count}</p>
 )
}

Tada turite modifikuoti CounterButton komponentą, kad priimtumėte HandIncrement funkciją ir iškviestumėte ją vartotojui spustelėjus mygtuką.

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

Pakėlus valstybę duomenys centralizuojami ir perkeliama atsakomybė valdant valstybę nuo vaiko iki tėvo.

Būsenos panaikinimas ne tik padeda rodyti duomenis pirminiame komponente, bet ir gali padėti sinchronizuoti duomenis keliuose komponentuose.

Tarkime, antraštės ir poraštės komponentas buvo įdėtas pirminiame komponente ir kiekvienas iš šių komponentų taip pat rodo bendrinamą skaičių. Jei norite bendrinti šią vertę, galite perduoti ją šiems komponentams kaip rekvizitus.

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



 )
}

Tačiau jūs turite būti atsargūs keldami būseną, kad nepatektumėte į situaciją, vadinamą atramos gręžimu.

Prop gręžimo iššūkis

Kai programa plečiasi, galite pastebėti, kad keliems komponentams, esantiems giliau komponentų medyje, reikia prieigos prie bendrinamos būsenos. Kad ši bendrinama būsena būtų pasiekiama įdėtiesiems komponentams, turite perduoti rekvizitus per tarpinius komponentus. Šis procesas gali sukelti atramos gręžimą.

Dėl atramos gręžimo sunku stebėti duomenų srautą ir gali sukelti sunkiai prižiūrimą kodą.

Norėdami sušvelninti atramos gręžimą, bet vis tiek dalytis duomenimis iš įvairių komponentų, apsvarstykite galimybę naudoti React kontekstą. Reagavimo kontekstas leidžia centralizuoti būseną, kad ji būtų pasiekiama visoje programoje.

Dalijimasis duomenimis „React“ naudojant rekvizitus

Kai reikia bendrinti duomenis iš antrinio komponento su pirminiu komponentu, pakelkite būseną į pirminį komponentą, tada perduokite būseną atnaujinančią funkciją antriniam komponentui kaip rekvizitus.

Tais atvejais, kai antrinis komponentas yra giliai įdėtas į komponentų medį, naudokite būsenos valdymo įrankį, pvz., „React Context“, arba trečiosios šalies įrankį, pvz., „React Redux“, kad išvengtumėte atramos gręžimo.