Az állapot emelése azt jelenti, hogy az állapotot egy gyermek komponensből egy közös szülőbe helyezzük át, hogy több gyermek megoszthatja és szinkronban maradhat ugyanazokkal az adatokkal. Ez a szabvány megoldás, amikor testvér komponenseknek koordinálniuk kell.
() { [temp, setTemp] = (); ... }
Ha két testvér komponensnek mindegyikének saját másolata van a kapcsolódó állapotnak, nincs mód arra, hogy konzisztensek maradjanak — az egyik módosítása nem érinti a másikat.
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 */}
<TempInput scale="C" value={temperature} onChange={setTemperature} />
<TempInput scale="F" value={temperature} onChange={setTemperature} />
<p>Both inputs share one value: {temperature}</p>
</>
);
}
function TempInput({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}
A megosztott állapot most a szülőben (Calculator) él. Az értéket lefelé prop-ként és egy setter-ként adja át, hogy a gyermekek módosítást kérhessenek (felfelé). Most mindkét bemenet ugyanazt a forrást tükrözi — az egyik szerkesztése mindkettőt frissíti.
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)
Ez ugyanaz az "adatok lefelé, események felfelé" folyam, amelyet a megosztott állapot alkalmazásához alkalmazunk.
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.
Az állapot emelése az állapot megosztásának alapvető technikája testvér/kapcsolódó komponensek között komponens alapú keretrendszerekben — egyetlen igazságforrást tart a közös szülőben, hogy a gyermekek szinkronban maradjanak.
Ez gyakran az első eszköz, amelyet a Context vagy egy store hozzáadása előtt kell használni.
Annak felismerése, hogy mikor kell emelni (a testvérek koordinációra van szükségük) — és mikor vált túl az emelés (prop drilling-ot okoz, ezért Context/store ideje jött el) — kulcsfontosságú az állapot jó strukturálásához.