React.js'nin en büyük avantajlarından birinin sunucu tarafında render olması gerekiyor . Sorun, anahtar işlevinin React.renderComponentToString()
eşzamanlı olmasıdır, bu da bileşen hiyerarşisi sunucuda işlenirken eşzamansız verilerin yüklenmesini imkansız kılar.
Diyelim ki, yorum yapmak için sayfanın hemen hemen her yerine bırakabileceğim evrensel bir bileşenim var. Yalnızca bir özelliğe, bir tür tanımlayıcıya (örneğin, yorumların altına yerleştirildiği bir makalenin kimliği) sahiptir ve diğer her şey bileşenin kendisi tarafından işlenir (yorumların yüklenmesi, eklenmesi, yönetilmesi).
Flux mimarisini gerçekten seviyorum çünkü birçok şeyi çok daha kolay hale getiriyor ve depoları sunucu ile istemci arasında durum paylaşımı için mükemmel. Yorumları içeren mağazam başlatıldıktan sonra, onu seri hale getirip sunucudan istemciye kolayca geri yükleyebiliyorum.
Soru, mağazamı doldurmanın en iyi yolunun ne olduğudur. Geçtiğimiz günlerde internette çokça arama yaptım ve birkaç stratejiyle karşılaştım, bunların hiçbiri React'in bu özelliğinin ne kadar "tanıtıldığı" düşünüldüğünde gerçekten iyi görünmüyordu.
Bence en basit yol, gerçek oluşturma başlamadan önce tüm mağazalarımı doldurmak. Bu, bileşen hiyerarşisinin dışında bir yer anlamına gelir (örneğin yönlendiricime bağlı). Bu yaklaşımla ilgili sorun, sayfa yapısını hemen hemen iki kez tanımlamam gerekecek olmasıdır. Daha karmaşık bir sayfa düşünün, örneğin birçok farklı bileşen içeren bir blog sayfası (gerçek blog gönderisi, yorumlar, ilgili gönderiler, en yeni gönderiler, twitter akışı ...). Sayfa yapısını React bileşenlerini kullanarak tasarlamam ve daha sonra başka bir yerde bu mevcut sayfa için gerekli her mağazayı doldurma sürecini tanımlamam gerekirdi. Bu bana iyi bir çözüm gibi görünmüyor. Ne yazık ki çoğu izomorfik öğretici bu şekilde tasarlanmıştır (örneğin bu harika akı öğreticisi ).
React-async . Bu yaklaşım mükemmel. Her bileşendeki özel bir işlevde durumun nasıl başlatılacağını (eşzamanlı veya eşzamansız olarak fark etmez) ve bu işlevler hiyerarşi HTML'ye dönüştürülürken adlandırılır. Durum tamamen başlatılana kadar bir bileşen işlenmeyecek şekilde çalışır. Sorun, Fibers gerektirmesidirbu, anladığım kadarıyla standart JavaScript davranışını değiştiren bir Node.js uzantısı. Sonucu gerçekten beğenmeme rağmen hala bir çözüm bulmak yerine oyunun kurallarını değiştirdik gibi geliyor bana. Ve bence React.js'nin bu temel özelliğini kullanmak için bunu yapmaya zorlanmamalıyız. Ayrıca bu çözümün genel desteğinden de emin değilim. Fiber'i standart Node.js web barındırmada kullanmak mümkün mü?
Biraz kendi kendime düşünüyordum. Gerçekleştirme ayrıntılarını gerçekten düşünmedim, ancak genel fikir, bileşenleri React-async'e benzer şekilde genişleteceğim ve ardından tekrar tekrar React.renderComponentToString () 'i kök bileşenine çağıracağım. Her geçiş sırasında, genişleyen geri aramaları toplar ve ardından mağazaları doldurmak için geçişin sonunda arardım. Mevcut bileşen hiyerarşisinin gerektirdiği tüm mağazalar doldurulana kadar bu adımı tekrarlardım. Çözülmesi gereken birçok şey var ve özellikle performans konusunda emin değilim.
Bir şey mi kaçırdım? Başka bir yaklaşım / çözüm var mı? Şu anda react-async / fiberler yoluna gitmeyi düşünüyorum ama ikinci noktada açıklandığı gibi bundan tam olarak emin değilim.
GitHub ile ilgili tartışma . Görünüşe göre resmi bir yaklaşım ya da çözüm bile yok. Belki asıl soru, React bileşenlerinin nasıl kullanılmasının amaçlandığıdır. Basit görünüm katmanı gibi (hemen hemen benim önerim bir numaralı) veya gerçek bağımsız ve bağımsız bileşenler gibi mi?