Resmi Dokümanlar'ı tepki "olduğunu devlet React.PureComponents' shouldComponentUpdate()sadece sığ nesneleri karşılaştırır" ve durumu 'derin' ise buna karşı önerir.

Bu göz önüne alındığında, React.PureComponentReact bileşenleri oluştururken tercih edilmesinin bir nedeni var mı?

Sorular :

• kullanmayı React.Componentdüşündüğümüz herhangi bir performans etkisi var React.PureComponentmı?
• Ben tahmin ediyorum shouldComponentUpdate()ait PureComponentsadece sığ karşılaştırmalar gerçekleştirir. Bu durumda, söz konusu yöntem daha derin karşılaştırmalar için kullanılamaz mı?
• "Dahası, React.PureComponent'ın shouldComponentUpdate()atlama tüm bileşenin alt ağaç için güncelleştirmeleri desteklemek" - Bu prop değişiklikler yok sayması anlamına mı geliyor?

Soru , eğer yardımcı olursa, bu orta blogda okumaktan ortaya çıktı .

Arasındaki başlıca fark, React.PureComponentve React.Componentolan PureComponentbir does sığ karşılaştırma devlet değişikliği. Bu, skaler değerleri karşılaştırırken değerlerini karşılaştırdığı, ancak nesneleri karşılaştırırken yalnızca referansları karşılaştırdığı anlamına gelir. Uygulamanın performansını artırmaya yardımcı olur.

React.PureComponentAşağıdaki koşullardan herhangi birini yerine getirebildiğiniz zaman devam etmelisiniz .

• Durum / Sahne değişmez bir nesne olmalıdır
• Durum / Props'un hiyerarşisi olmamalıdır
• forceUpdateVeri değiştiğinde aramalısınız

Kullanıyorsanız, React.PureComponenttüm alt bileşenlerin de saf olduğundan emin olmalısınız.

React.PureComponent kullanmaya devam edebileceğimiz herhangi bir performans etkisi var mı?

Evet, uygulama performansınızı artıracaktır (sığ karşılaştırma nedeniyle)

Ben Purecomponent shouldComponentUpdate () sadece sığ karşılaştırmalar yapar tahmin ediyorum. Durum buysa, söz konusu yöntem daha derin karşılaştırmalar için kullanılamaz mı?

Doğru tahmin ettin. Yukarıda bahsettiğim koşullardan herhangi birini karşılıyorsanız kullanabilirsiniz.

"Ayrıca, React.PureComponent'ın shouldComponentUpdate () öğesi tüm bileşen alt ağacı için prop güncelleştirmelerini atlıyor" - Bu, prop değişikliklerinin yok sayıldığı anlamına mı geliyor?

Evet, pervane değişiklikleri göz ardı edilir Sığ karşılaştırmada fark bulamazsa.

Componentve PureComponentbir fark var

PureComponent, yöntemi sizin için Componentişlemesi dışında tam olarak aynıdır shouldComponentUpdate.

Sahne veya durum değiştiğinde, hem sahne hem de durum PureComponentiçin sığ bir karşılaştırma yapar. Componentdiğer yandan mevcut sahne ve durumları kutunun dışına doğru karşılaştırmaz. Böylece, bileşen her shouldComponentUpdateçağrıldığında varsayılan olarak yeniden oluşturulur .

Sığ Karşılaştırma

Önceki sahne ve durumu bir sonraki ile karşılaştırırken, sığ bir karşılaştırma, ilkellerin aynı değere sahip olduğunu (örn., 1 eşittir 1 veya bu doğru eşittir) ve referansların nesneler ve diziler gibi daha karmaşık javascript değerleri arasında aynı olduğunu kontrol edecektir.

Kaynak: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

Gördüğüm gibi, temel fark, bir bileşenin, bileşen sahne ve durumunun değişip değişmediğine bakılmaksızın, üst öğesinin her yeniden sunumunda yeniden gönderilmesidir.

Diğer taraftan, saf bileşenin destekleri (veya durumu) değişmedikçe, ana bileşeni yeniden gönderilirse saf bir bileşen yeniden oluşturulmaz.

Örneğin, üç seviyeli hiyerarşiye sahip bir bileşen ağacımız olduğunu varsayalım: ebeveyn, çocuk ve torun.

Ebeveynin sahne donanımı, yalnızca bir çocuğun destek biriminin değişeceği şekilde değiştirildiğinde, o zaman:

• tüm bileşenler normal bileşenlerse, bileşen ağacının tamamı yeniden görüntülenir
• eğer tüm çocuklar ve torunlar saf bileşenlerse, aksesuarlarının değiştirilip değiştirilmemesine bağlı olarak sadece bir çocuk yeniden ve bir veya tüm torunlarını tekrar oluşturacaktır. Bu bileşen ağacında çok sayıda bileşen varsa, bu önemli bir performans artışı anlamına gelebilir.

Ancak bazen saf bileşenler kullanmanın herhangi bir etkisi olmayacaktır. Ebeveyninin aksesuarlarını bir redux mağazasından aldığı ve çocuklarının aksesuarlarının karmaşık bir hesaplamasını yapması gerektiğinde böyle bir durumum vardı. Ebeveyn, çocuklarını göstermek için bir düz liste kullandı.

Sonuç, redux mağazasında her küçük değişiklik olduğunda bile, çocuk verilerinin tüm düz liste dizisi yeniden hesaplandı. Bu, ağaçtaki her bileşen için, değerler değişmese bile desteklerin yeni nesneler olduğu anlamına geliyordu.

Bu durumda saf bileşenler yardımcı olmaz ve performans artışı yalnızca düzenli bileşenler kullanarak ve bir reerender gerekiyorsa shouldComponentUpdate'de çocuklarda kontrol edilerek elde edilebilir.