Mantieni reagire-routed-routing-componenti per tutti gli stati della cronologia

Question

Realizzo un'applicazione mobile con Cordova. Utilizzare lo react-router@2.0.0 + ReactCSSTransitionGroup per implementare l'animazione del "mazzo di carte". Ho un albero delle rotte rigido senza possibilità di collegamenti circolari.

Per migliorare le prestazioni e salvare lo stato delle precedenti route-componenti, vorrei mantenere tutta la storia della loro con lo smontaggio solo sulla comparsa di stato o sostituire-stato.

Come fare?

Answer 1

Sei sicuro che questo sarebbe effettivamente aiutare? Se capisco il tuo punto, ti piacerebbe "mettere in cache" i componenti in modo che quando rivedi un percorso esistente, non sia necessario ricreare la struttura DOM (credo che Ionic abbia un'opzione per fare esattamente questo).

non sono sicuro quanto di un beneficio che si otterrebbe come Reagire utilizza un'implementazione DOM virtuale che dovrebbe già aggiornare il DOM in modo efficiente. Quando passi da una rotta a un'altra, verranno modificati solo i nodi DOM minimi, in base alla differenza con il DOM reale e la tua rappresentazione React.

Se si vuole "cache" lo stato dei componenti in modo non c'è bisogno di ricalcolare ogni volta, allora sarebbe molto più facile da usare qualcosa come redux e reselect (https://github.com/reactjs/reselect) per aggiornare i dati dai ai tuoi componenti solo quando necessario, completando sostanzialmente l'estrazione dello stato dai tuoi componenti. Il tuo stato sarebbe quindi sopravvissuto allo smontaggio di un componente.

Riseleziona utilizza la funzione Memoizzazione di ricalcolare i puntelli si passa ai componenti solo quando è necessario, al contrario di ogni volta che qualcosa è cambiato.

Answer 2

Forse è possibile sfruttare i callback onEnter e onChange quando si configura rootRoute.

In onEnter richiamata indietro è possibile registrare il percorso percorso iniziale. Nel callback onChange è possibile confrontare il percorso cur/successivo, controllare la cronologia del percorso registrato e registrare il percorso. Pertanto, poiché è possibile controllare e confrontare il percorso del percorso ogni volta che si modificano i percorsi, è possibile interrompere qualsiasi collegamento circolare.

A proposito di salvare lo stato tutto del componente, se si utilizza redux, l'intero stato app può salvare in un oggetto, il negozio redux.

Se si desidera salvare lo stato del componente in quel momento prima di lasciare, si può inviare un'azione save component state in componentWillUnmount, e recuperare lo stato in componentWillMount.

Ecco un frammento:

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) { 
     ... 
    } 
}