İki bileşenin aynı state'i paylaşması gerektiğinde, bu state'i en yakın ortak ancestor'a taşır ("kaldırır") ve props aracılığıyla aşağıya aktarırsınız, böylece tek bir gerçek kaynağı olur.
jsx
() {
[query, setQuery] = ();
(
);
}
İki bileşenin aynı state'i paylaşması gerektiğinde, bu state'i en yakın ortak ancestor'a taşır ("kaldırır") ve props aracılığıyla aşağıya aktarırsınız, böylece tek bir gerçek kaynağı olur.
() {
[query, setQuery] = ();
(
);
}
Eğer her child kendi query başlangıcını tutsaydı, senkronizasyonu kaybederlerdi. State'i kaldırmak, giriş ve sonuçların her zaman uyumlu olduğu anlamına gelir.
State'i yüksekte tutmak, sizi birçok ara bileşenden props geçmeye zorlayabilir; bu bileşenler onları kullanmaz:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children olarak geçirin, böylece veriler çevrim yapılmak yerine kullanıldıkları yerde kalır.Yönlendirici ilke: state'i yalnızca ihtiyacı kadar yüksekte tutun — daha yüksekte değil. Aşırı yükselme, geniş re-render'lar ve prop drilling'e neden olur; eksik yükselme, senkron dışı kopyalara neden olur.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap