Tüm geçmiş durumları için yanıt yönlendiricili yönlendirilmiş bileşenleri koruyun

Question

Cordova ile mobil uygulama yapıyorum. "Kart destesi" animasyonunu uygulamak için react-router@2.0.0 + ReactCSSTransitionGroup kullanın. Dairesel bağlantılar olasılığı olmayan sıkı bir Routes ağacım var.

Performansı iyileştirmek ve önceki rota bileşenlerinin durumunu kaydetmek için, tüm geçmişini yalnızca pop-state veya replace-state'de koparmadan tutmak istiyorum.

Nasıl yapmalı?

Answer 1

Bunun gerçekten yardımcı olabileceğinden emin misiniz? Eğer noktanızı alırsam, bileşenleri "önbelleğe almak" istersiniz, böylece mevcut bir rotayı tekrar gözden geçirdiğinizde, DOM yapısını yeniden oluşturmaya gerek yoktur (Sanırım İyonik tam olarak bunu yapma seçeneğine sahiptir).

React, DOM'ı daha verimli bir şekilde güncellemeye ihtiyaç duyan sanal bir DOM uygulaması kullandığından, ne kadar yararlandığından emin değilim. Bir rotadan diğerine geçtiğinizde, gerçek DOM ve React gösterimleriniz ile olan farka göre, yalnızca minimum DOM düğümleri değiştirilir. Eğer bunu her zaman yeniden hesaplamak zorunda kalmamak için bileşenlerin durumunu "önbelleğe" istiyorsanız

, veri sizi bilgilendirmek amacıyla redux ve reselect (https://github.com/reactjs/reselect) gibi bir şey kullanmak çok daha kolay olurdu Bileşenlerinizi yalnızca gerektiğinde verin, temel olarak bileşenlerinizi dışa aktarmayı tamamlayın. Durumunuz daha sonra bir bileşenin koparmasından kurtulacaktı.

Yeniden bağla Her zaman bir şey değiştiğinde, gerektiğinde bileşenlerinizi geçirdiğiniz parçaları yeniden hesaplamak için işlev belleğinin kullanılmasını yeniden seçin.

Answer 2

Belki rootRoute'u yapılandırırken onEnter ve onChange geri aramalarından yararlanabilirsiniz.

AçıkKanal Geri aramada ilk rota yolunu kaydedebilirsiniz. OnChange geri aramasında, cur/sonraki rota yolunu karşılaştırabilir, kayıtlı yol geçmişini ve kayıt yolunu kontrol edebilirsiniz. Bu nedenle, rota güzergahı her değiştiğinde rota yolunu kontrol edip karşılaştırabildiğiniz için, dairesel bağlantıları durdurabilirsiniz.

Redux kullanıyorsanız tüm bileşen durumunu kaydetme, tüm uygulama durumu bir nesneye, redux deposuna kaydedebilir.

Öğenin durumunu, izin vermeden önce kaydetmek istiyorsanız, numaralı telefona bir save component state eylemi gönderebilir ve componentWillMount numaralı telefondan durumu kurtarabilirsiniz. İşte

pasajıdır: (orada, giriş devletler gibi birçok örtük gizli devletiz konumuna ilerlemek

var rootRoute = { 
    path: '/', 
    onEnter: enter, 
    onChange: change, 
    component: MyApp, 
    indexRoute: { component: Home }, 
    childRoutes: [ 
     LoginRoute, 
     ... 
     {path: 'home', component: Home}, 
     { 
      path: '*', 
      component: NotFound 
     } 
    ] 
}; 

function enter (next) { 
    // pathStore record all navigation history 
    pathStore.record(next.location.pathname); 
} 
function change (cur, next, c) { 
    // when hit cur path links in nav, pathname is same, key is different. 
    if (cur.location.pathname !== next.location.pathname) { 
     ... 
    } 
}