Yapabileceğiniz en iyi şey Router.run
(http://rackt.github.io/react-router/#Router.run) içinde geri arama kullanmaktır. Bunu geçmek geri arama her url değişiklikleri çağrılan ve sayfanın alınan bu örnekte olduğu gibi yeniden işleme için sorumlu:
Router.run(routes, function (Root) {
// whenever the url changes, this callback is called again
React.render(<Root/>, document.body);
});
o işlevde, sen çağırmadan önce gereken herhangi zaman uyumsuz işlemleri yapabilirsiniz böyle React.render()
:
Router.run(routes, function (Root) {
// whenever the url changes, this callback is called again
asyncStuff().then(function (data) {
React.render(<Root data={data} />, document.body);
});
});
Bu yaklaşımdaki sorun bu veri hazır olana kadar UI hiç tepki vermez olmasıdır. Bunun yerine boş bir devlet ile işleme bileşeni ve componentDidMount
yılında verilerini getirirken tavsiye ve sonra daha iyi veri geldiğinde yeniden işlemek. Veya, iki bileşen haline getirilirken verileri ve oluşturulmaya ayırmak olacaktır. Bir bileşen, verileri getirir ve bunu, oluşturma bileşenine bir özellik olarak aktarır. , Tepki bu ortak kalıptır
render: function() {
if (this.state.data) {
return <TheComponent data={this.state.data} />;
} else {
return <Spinner />;
}
}
hale veri alma ve devlet ile ilgilenen bileşenler ve bileşenlerin ayrılması için: Veri getirilirken bileşen veri olmadığı sürece bile, başka bir bileşen render gibi bir şey önleyebilirsiniz bu eyalet. Durumsal bileşenleri hiyerarşiyi olabildiğince yukarı itmek istiyorsunuz çünkü mantıksal bir sınır yaratıyor. hataların% 90 gerçekleştiği durum bilgisi bileşenleridir ve sinirinizi avcılık spesifik anlarda odaklanmak edebilmek için güzel.
Beklemedeki diğer bir sorun, kullanıcının hızlı bir şekilde gezinebilmesidir; bu, ilk veriler gelmeden önce Router.run
geri aranmasının yeniden çağrıldığını gösterir. Bu nedenle, son işlemi iptal ettiğinizden ve bunu hiç oluşturmayacağınızdan emin olmanız gerekir.
Ben aslında ui-yönlendirici çözmek desenini taklit bir çözüm yazma sona erdi. Ben :-) ... siz "kısaca payı" vaat Aslında bu cevap ilgi olacağını bir cevap kısaca –
@MohamedElMahallawy olarak – jbandi
İyi cevabı paylaşacak. Anısal arka plandan gelen tepkiyi öğrenirken bana uygular. Her durumda React yolunu yapmalıyız ... Yani Router.run yöntemi söz konusu değil. Ancak bu tür cevaplar/sorular bizim için geçişi kolaylaştırır, Açgözlü millet. :) –