Tepki: Akordeon Girişini Nasıl Bekletir Remount Sonrası Genişletildi

Question

Çeşitli <Endpoint /> bileşenlerinden oluşan bir akordeon stiline sahip <EndpointList /> bileşenim var. Her <Endpoint />, başlangıçta gizlenen ve kullanıcı söz konusu bitiş noktasının başlığını tıkladığında genişletilen bir parametre bölümüne sahiptir.

Hedefim, bir <Endpoint /> genişlediğinde ve kullanıcı başka bir görünüme gittiğinde ve sonra uç noktaların listesini içeren görünüme geri döndüğünde, daha önce genişletilmiş olan <Endpoint /> hala genişletilmesi gerektiğidir. Yani, parametre bölümü, <EndpointList />'un tümünün bağlantısı kesilip yeniden takıldığında bile görülebilir olmalıdır. Her son nokta, parametrelerinin şu anda genişletilip genişletilmediğini belirten bir boole expanded işaretine sahiptir. Bu bayrakları <Endpoint /> ve <EndpointList /> bileşenlerinden çıkarıp, hiçbir zaman yeniden bağlanmayan en üst düzey bileşenime taşıyarak hedefime ulaştım. Bir son nokta genişletilmiş veya daraltılmış edilince bu aşağı geçirilir benim üst düzey bileşenin durumunu değiştirir olarak bütün <EndpointList /> şimdi, yeniden oluşturulur, doğru tepki anlamak

1. : Ancak, bu aşağıdaki yeni sorunlar getirmektedir <EndpointList />. Doğru? (Bir çok noktayı içeren bir listede uç noktaları genişletirken dikkate değer bir gecikme var)
2. Uygulamamda birden çok <EndpointList /> bileşeninde tek bir uç nokta bulunabilir. Şu anki yaklaşımımla, bir uç nokta genişletildiğinde, yalnızca başlığında gerçekte tıklanmış olduğu <EndpointList /> örneğinde değil, uygulamada her yerde genişletilir. Açıkçası bu davranışı istemiyorum.

Yani benim sorular şunlardır:

• Ne uç noktasının expanded durumunu korumak için iyi bir yoldur ve son nokta gösteren bileşen remounted ne zaman kaybetmemek için?

• Bileşen hiyerarşisinde (olduğu gibi) expanded durumunun üstesinden gelmek, bunu başarmanın en iyi (veya tek) yolu ise, yukarıda açıklanan sorunlardan nasıl kurtulurum?

Şimdiden teşekkürler!

---

Güncelleme

: https://jsfiddle.net/7shLogek/2: Sorunu göstermek için bir JSFiddle yarattı. Tarayıcı konsolunuzda, bir uç nokta genişletildiğinde veya daraltıldığında her son nokta listesinin yeniden oluşturulduğunu görebilirsiniz. Ayrıca, uç noktalar her iki listede de aynı anda her zaman genişler/daraltılır.

---

Güncelleme 2: Ben Endpoint.shouldComponentUpdate() uygulanması ve aslında yeniden oluşturulur değişti Facebook's Shallow Compare Addon böylece sadece bu son noktalarını kullanarak performans sorunu (1.) çözüldü.

Answer 1

Bazı hızlı ipucu:

• 1: Eğer yeterince yeniden monte performant almak yapamıyorsanız, gizleme ve kök bileşeni mümkünse gösteren yerine kesip tekrar yapmayı deneyin.
• 2: Ben (eğer this.state.endpoints ile var gibi) için ayrı gereken davranışlardan giriş listenin her biri için aynı durum, sen muhtemelen EndpointList için devletler bir koleksiyon oluşturmak için gereken fark her bir liste.