En büyük avantajlarından biriReact.jsolması gerekiyordusunucu tarafında işleme. Sorun React.renderComponentToString() senkron imkansız bileşen hiyerarşisi olarak herhangi bir zaman uyumsuz veri yüklemek için yapar anahtar işlevi sunucu üzerinde işlenir.

Hadi sayfasında hemen hemen her yerde bırakırım ki yorum için evrensel bir bileşen var. Yalnızca bir özellik, bir çeşit identificator (örneğin kimliği bir makale feryat eden yorumlar yer almaktadır), ve geri kalan her şey idare tarafından bileşeni (yükleme, ekleme, yönetme yorum).

Ben gerçekten gibiAkışeyler çok daha kolay ve de bu Mağazadan bir çok yapar çünkü mimarisi, sunucu ve istemci arasında devlet ve paylaşım için mükemmeldir. Deposu içeren yorumlarım başlatıldıktan sonra, sadece kolayca geri yere getirmek ve istemci sunucudan gönderebilirim.

Bu soru benim deposunu doldurmak için en iyi yolu budur. Son günlerde çok googling oldum ve hiçbiri çok iyi Tepki bu özelliği olmak ne düşünüyor gibiydi birkaç stratejileri, ben geldim"". terfi

1. Benim görüşüme göre, en basit şekilde gerçek işleme başlamadan önce bütün stoklarımı doldurmak için. Bir yerde bileşen hiyerarşisi (örneğin benim yönlendirici bağlı) dışında anlamına gelir. Bu yaklaşım ile sorun oldukça fazla sayfa yapısı iki kez tanımlamak istiyorum. Daha karmaşık bir sayfa düşünün, örneğin birçok farklı bileşenleri ile bir blog sayfası (gerçek blog yazısı, yorum, ilgili mesajlar, en yeni mesajlar, twitter akışı...). Sayfa yapısını Tepki bileşenleri kullanarak ve bu geçerli sayfa için gerekli her deposu doldurma işlemi tanımlamak için olurdu başka bir yerde tasarım olurdu. Bu bana iyi bir çözüm gibi görünmüyor. Ne yazık ki çoğu izomorfik (örnek bu harika flux-tutorial).

2. React-async. Bu yaklaşım mükemmel. Bana sadece devlet başlatmak için herbir parçanın özel bir işlevi tanımlamanıza olanak sağlar (zaman uyumlu olup olmadığı önemli değil veya uyumsuz) ve bu işlevler hiyerarşisi HTML oluşturulur denir. Bir parça devlet tamamen başlatıldı kadar işlenmiş bir şekilde çalışır. Sorun, anladığım kadarıyla, standart JavaScript davranışı değiştirir node.js bir uzantısı olan Fibers gerektirmesidir. Gerçekten sonuç gibi olsa da, yine de bir çözüm bulmak yerine oyunun kurallarını değiştirdik gibi geliyor bana. Ve o React.js bu temel özelliği kullanmak için yapmak zorunda olmamalıyız bence. Ayrıca bu çözüm, genel destek konusunda emin değilim. Standart node.js webhostings üzerinde Fiber kullanmak mümkün mü?

3. Kendi kendime biraz düşündüm. Gerçekten uygulama ayrıntıları yalak düşünmedim ama genel bir fikir benzer şekilde bileşenleri Tepki-zaman uyumsuz uzatmak istiyorum ve daha sonra art arda Tepki derim.() renderComponentToString kök bileşeni. Uzanan geri toplamak ve onları arayın ve pas depolarını doldurmak için her sırasında geçmektedir. Tüm mağazalarda geçerli bileşen hiyerarşisi gereğince doldurulması kadar bu adımı tekrar ediyordum. Çözülmesi gereken çok şey var ve performans konusunda emin değilim özellikle.

Bir şey mi kaçırdım? Çözüm/başka bir yolu var mı? Şu an tepki-zaman uyumsuz/lifler şekilde gitmeyi düşünüyorum ama ikinci nokta açıklandığı gibi bu konuda tamamen emin değilim.

Güncelleme:Related discussion on GitHub. Görünüşe göre, resmi yaklaşımı ve hatta çözümü yok. Belki de asıl soru şu bileşenleri kullanılmak üzere tasarlanmıştır nasıl Tepki. Basit görünümü katman (hemen hemen benim önerim bir numara) veya bağımsız ve tek başına gerçek bileşenleri gibi?

Eğer react-router, kullanırsanız sadece üzerinde .wait çağrı Transition bir nesne geçti hangi parçaları, willTransitionTo yöntemleri tanımlayabilirsiniz.

Önemli değil eğer renderToString senkron çünkü geri arama Router.run olmayacak denilen kadar .waited vaatler çözüldü, o zaman renderToString denilen katman ne kalabalık saklar. Eğer mağazalara sadece kendi verileri geçici olarak tam zamanında önce ayarlayabilirsiniz tekiz olsa bile senkron işleme arayıp bileşeni göreceksiniz.

Yazılım bir örnek:

var Router = require('react-router');
var React = require("react");
var url = require("fast-url-parser");

module.exports = function(routes) {
    return function(req, res, next) {
        var path = url.parse(req.url).pathname;
        if (/^\/?api/i.test(path)) {
            return next();
        }
        Router.run(routes, path, function(Handler, state) {
            var markup = React.renderToString(<Handler routerState={state} />);
            var locals = {markup: markup};
            res.render("layouts/main", locals);
        });
    };
};

routes nesne yolları hiyerarşisini açıklar () verbatim istemci ve sunucu ile paylaşılıyor