State nach oben heben: Prinzipien und Beispiele

Willkommen

Das Problem: Nicht synchronisierte Geschwister

Den gemeinsamen Vorfahren ermitteln

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Beispiel: Einen Counter nach oben heben

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Callback-Props für Aktualisierungen

Controlled und Uncontrolled nach dem Anheben des States

State über mehrere Ebenen anheben

Vorteile des Anhebens von State

Abgeleiteter State aus angehobenem State

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Wenn das Anheben von State überhandnimmt

Kurzer Test

Zusammenfassung

Als Nächstes