Ką reiškia pakelti būseną?

Question

Accepted Answer

**Būsenos pakėlimas** reiškia būsenos perkelimą iš dukterinio komponento į **bendrą tėvinį**, kad keli dukteriniai komponentai galėtų dalintis ir išlikti sinchronizuoti su tais pačiais duomenimis. Tai standartinis sprendimas, kai brolio ir sesers komponentai turi koordinuotis. ## Problema: broliai ir sesės reikalingi bendri duomenys ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` Jei du brolio ir sesers komponentai laikausi savo susijusios būsenos kopijas, nėra jokio būdo, kad jie išliktu nuoseklūs — pasikeitus vienam, nuo to nepakeičiamas kitas. ## Sprendimas: pakelti būseną į tėvą ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` Bendra būsena dabar gyvena tėviniame komponente (`Calculator`). Jis perduoda reikšmę *žemyn* kaip nuosavybę ir nustatymo funkciją, kad dukteriniai komponentai galėtų prašyti pokyčių (*aukštyn*). Dabar abi įvestys atspindi tą patį šaltinį — redaguojant vieną, atnaujinamos abi. ## Šablonas ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` Tai tas pats "duomenys žemyn, įvykiai aukštyn" srautas, taikomas bendrai būsenai. ## Kai pakėlimas tampa per didelis ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## Kodėl tai svarbu Būsenos pakėlimas yra esminė technika **bendrai būsenai dalintis tarp brolio-sesers/susijusių komponentų** komponenti pagrįstuose rėmuose — jis išlaiko vienintelį tiesą bendrame tėviniame komponente, kad dukteriniai komponentai išliktų sinchronizuoti. Dažnai tai yra *pirmasis* įrankis, kurį reikėtų naudoti prieš pridedant Context ar store'ą. Suprasti, kada pakelti (broliai-sesės turi koordinuotis) — ir kada pakėlimas per didelis (sukeliamas prop drilling, todėl reikalingas Context/store'as) — yra pagrindinis veiksnys norint gerai sutvarkyti komponento būseną.