State nach oben heben bedeutet, State von einer untergeordneten Komponente zu einer gemeinsamen übergeordneten Komponente zu verschieben, damit mehrere untergeordnete Komponenten die gleichen Daten teilen und synchron bleiben können. Das ist die Standardlösung, wenn Geschwister-Komponenten koordiniert werden müssen.
() { [temp, setTemp] = (); ... }
Wenn zwei Geschwister-Komponenten jeweils ihre eigene Kopie des zugehörigen State halten, gibt es keine Möglichkeit, diese konsistent zu halten — die Änderung einer beeinflusst nicht die andere.
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)} />;
}
Der gemeinsame State befindet sich jetzt in der übergeordneten Komponente (Calculator). Sie gibt den Wert nach unten als Prop und einen Setter weiter, damit untergeordnete Komponenten Änderungen anfordern können (nach oben). Jetzt spiegeln beide Eingaben die gleiche Quelle wider — das Bearbeiten einer aktualisiert beide.
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)
Das ist der gleiche "Daten nach unten, Ereignisse nach oben"-Fluss, angewendet um State gemeinsam zu nutzen.
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.
State nach oben zu heben ist die grundlegende Technik zum Teilen von State zwischen Geschwister-/verwandten Komponenten in komponentenbasierten Frameworks — es behält eine einzelne Quelle der Wahrheit in einer gemeinsamen übergeordneten Komponente, damit die untergeordneten Komponenten synchron bleiben.
Es ist oft das erste Tool, das verwendet wird, bevor Context oder ein Store hinzugefügt wird.
Zu erkennen, wann man heben sollte (Geschwister müssen koordiniert werden) — und wann Heben zu viel ist (was zu Prop Drilling führt, daher ist es Zeit für Context/einen Store) — ist grundlegend für eine gute Strukturierung des Komponenten-State.