Raising state up inamaanisha kuhamisha state kutoka kwa kigawo cha mtoto kwenda kwa mzazi wa kawaida ili vigawo vingi vya mtoto viweze kushiriki na kubaki katika sinkronizasyo na data sawa. Ni suluhisho la kawaida wakati vigawo vya kaka/dada vinahitaji kuandamana.
() { [temp, setTemp] = (); ... }
Ikwa vigawo viwili vya kaka/dada kila kimoja kinavuta kopia yake ya state inayohusiana, hakuna njia yoyote ya yao kubaki sawa — kubadilisha moja haiathiri nyingine.
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)} />;
}
State iliyoshirikiana sasa inakaa katika mzazi (Calculator). Inapitisha thamani chini kama prop na setter ili watoto waweze kuomba mabadiliko (juu). Sasa sehemu zote za kuingiza zinaonyesha chanzo sawa — kuhariri moja husasisha zote mbili.
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)
Hii ni mtiririko sawa wa "data chini, matukio juu", umotekelezwa kutengeneza state iliyoshirikiana.
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.
Raising state up ni mbinu ya msingi ya kushiriki state kati ya vigawo vya kaka/dada/vya waliohusiana katika mifumo ya vigawo — inahifadhi chanzo moja cha ukweli katika mzazi wa kawaida ili watoto wabaki katika sinkronizasyo.
Mara nyingi ni zana ya kwanza kufikiria kabla ya kuongeza Context au store.
Kutambua wakati wa kuinua (kaka/dada wanahitaji kuandamana) — na wakati kuzingatia kumepita sana (kusababisha prop drilling, kwa hivyo ni wakati wa Context/store) — ni muhimu kwa muundo mzuri wa state ya kigawo.