v2.5.2
Giriş yap

React çoklu sorgu yapmak mantıklı mı?

howlberg
367 defa görüntülendi

Arkadaşlar homepage componenetimde yaklaşık olarak 5-6 adet farklı component bulunuyor. Header footer sections'lar gibi. Bunların verilerinin her biri database fetch ile işlemi ile çekiyorum. Ama homepage yüklenirken her copmonentte farklı istekler atacağım için bu bana bir sıkıntı oluşturur mu? Oluşturursa hangi mantıkla ilerlemeliyim.

Cevap yaz
Cevaplar (2)
tayfunerbilen
825 gün önce

performansı artırmak için sayfada göründüğü anda componentleri yükletebilirsiniz, observer api ile, bizim kanalda da bir örneği var, bunu react'e uyarlamakta çok zor değil hazır paketleride var, ayırmaktan bir zarar gelmez ama sayfada görünmeyeni atmanında çok bir esprisi yok

ebykdrms
827 gün önce

Eğer her component kendi isteğinin verilerini sadece kendisi kullanacaksa istekleri component'lerin kendi içinde tutmanız iyidir.
Eğer bazı istekler birden çok component'i etkilecekse bu yönetimi ana component'te tutmak iyidir.

React, ana component'te herhangi bir state değişimi olduğunda tüm alt component'lerini tekrar kontrol eder ve DOM'da bir değişiklik gerekip gerekmediğine bakar. Eğer gerekmiyosa DOM'u güncellemez. Ama yine de bu kontrolün de bir maliyeti vardır.
Örneğin ana component'inizde 5 tane alt component var. Bu component'lerden hepsi kendi isteğini atıyor ve dönen veriyi kendi içinde işliyor. Ama biri var ki, dönen sonucu işledikten sonra bir de ana component'e veri iletmesi gerekiyor.
İşte bu durumda React ana component'te bir aksiyon gerçekleştiği için 5 component'i birden yeniden taramak zorunda kalıyor ki bu değişikliğin onları etkileyip etkilemediğinden emin olsun...
Bu durumun önüne geçmelisiniz. Kendi yağında kavrulan 4 component'inizin tekrar kontrol edilmemesini sağlamalısınız. Bunun için de bu 4 component'i React.memo() fonksiyonu içine alabilirsiniz.
Böylelikle React bu component'leri, onlara gönderdiği parametrelerde bir değişiklik olmadığı için, yeniden kontrol etmeyecek. Onları sanki pure component gibi varsayıp geçecek.

Ben bu durumda muhtemelen 4 component'i React.memo() korumasına alırdım ama 5.component'in isteğini o component'in içinde değil ana component'te atardım. Sonucu da props yoluyla 5.component'e iletirdim.
Ama tabi hangi yöntemi kullandığınızda daha iyi performans alacağınız sizin kurgunuza bağlı. Belki de tüm istekleri ana component'te atmalı ve sonuçları diğer component'lere prop yoluyla iletmelisinizdir...