Ben oluştururken Tepki bileşenleri, şaşırtmak beni yapar şey istenmeyen yeniden verilmesidir. Bazı bileşenler niyetim olmadan yeniden işleniyor.

Yine de, istenmeyen yeniden oluşturma sorunlarını azaltmak için bir numara okudum, en iyi ipuçları değil, oldukça yararlı, buna kolokasyon deniyor . Bu nedir? Anladığım kadarıyla, ana kavram, durumu , onu kullanan bileşene mümkün olduğunca yakın kullanmaktır.

Dalış

Gelelim, 3 süper basit bileşen oluşturuyorum,

• App.js (ebeveyn olarak),
• FirstChild.js (ilk çocuk olarak),
• ve SecondComponent.js (ikinci bir çocuk olarak).

Yukarıdaki görüntü , durumu kullanmayan <SecondChild /> bile tüm bileşenlerin oluşturulduğunu gösterir .

İstediğimiz, durumu kullanmayan bileşeni oluşturmak değil . Yalnızca <FirstChild /> durumundaki durumu kullanırız . Bunu nasıl yapabiliriz? Durumu bileşene mümkün olduğunca yaklaştırarak onu kullanır. öyleyse durumu içeri taşıyarak yukarıdaki kodu iyileştirelim

<Uygulama />

<İlk Çocuk /> :

ve <SecondComponent/> öğesini değiştirmeden bırakın .

Sonuç

yine ilk renderda tüm bileşenleri render etmesi beklenir.

şimdi girdiyi tekrar yazalım

farkları görüyor musun? 5 harf yazıyoruz ve sadece konsol günlüğünü <FirstChild/> içinde yeniden oluşturuyoruz ! Yine de <SecondChild/> hiç yeniden oluşturmuyor

Niye ya?

Durum (lar) da veya destek(ler)de değişiklik(ler) varsa, tepkinin bileşeni ve içindeki tüm çocukları yeniden oluşturacağını unutmayın . Yukarıdaki ilk örnekte, durumu ana bileşene koyduk, bu yüzden yazarken, durumu kullanmayan alt bileşenler olsa bile, ana durum değiştirildiği için o da oluşturuldu.

Bu teoriye dayanarak, durumu, onu kullanan tek bileşene taşıdık. Bunu yaparak, durum yalnızca <FirstChild /> öğesinin içinde <SecondChild /> ve ebeveyni etkilemeden değişti .

Basit ipuçları henüz yardımcı oldu. 👌

Referanslar:

1. https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster
2. https://kentcdodds.com/blog/colocation