State'i Yukarı Taşıma: İlkeler ve Örnekler

Hoş Geldiniz

Sorun: Eşzamanlı Olmayan Kardeş Bileşenler

Ortak Atayı Belirleme

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

Sayaç Taşıma Örneği

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

Güncellemeler İçin Geri Çağırma Özellikleri

Taşıma Sonrasında Denetlenen ve Denetlenmeyen

Çok Düzeyli Durum Taşıma

Durum Taşımanın Faydaları

Taşınan Durumdan Türetilmiş Durum

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

Durum Taşımanın Aşırıya Kaçtığı Durumlar

Hızlı Kontrol

Özet

Sırada