Keep react-router routed-components für alle Verlaufsstatus

Question

Ich mache eine mobile Anwendung mit Cordova. Verwenden Sie die react-router@2.0.0 + ReactCSSTransitionGroup, um die Animation "Kartenablage" zu implementieren. Ich habe einen strikten Routes Baum ohne die Möglichkeit von kreisförmigen Verbindungen.

Um die Leistung zu verbessern und den Zustand der vorherigen Route-Komponenten zu speichern, möchte ich die gesamte Geschichte von ihnen mit Unmount nur auf Pop-Zustand oder ersetzen-Zustand.

Wie geht das?

Answer 1

Sind Sie sicher, dass dies tatsächlich helfen würde? Wenn ich Ihren Standpunkt verstehe, möchten Sie die Komponenten "zwischenspeichern", so dass Sie beim erneuten Besuch einer bestehenden Route die DOM-Struktur nicht neu erstellen müssen (ich denke, Ionic hat eine Option, genau das zu tun).

Ich bin mir nicht sicher, welchen Nutzen Sie daraus ziehen würden, da React eine virtuelle DOM-Implementierung verwendet, die das DOM bereits auf effiziente Weise aktualisieren sollte. Wenn Sie von einer Route zu einer anderen übergehen, werden nur die minimalen DOM-Knoten entsprechend dem Unterschied mit dem echten DOM und Ihrer React-Darstellung geändert.

Wenn Sie auf „Cache“ wollen den Zustand Ihrer Komponenten, so müssen Sie es nicht jedes Mal neu berechnet werden, dann wäre es viel einfacher, so etwas wie redux zu verwenden und reselect (https://github.com/reactjs/reselect), um die Daten, die Sie aktualisieren Geben Sie Ihre Komponenten nur bei Bedarf ein und schließen Sie im Wesentlichen das Extrahieren des Status aus Ihren Komponenten ab. Ihr Zustand würde dann das Aushängen einer Komponente überleben.

Erneut auswählen verwendet Funktionsmemoization, um die Requisiten neu zu berechnen, die Sie nur dann an Ihre Komponenten übergeben, wenn sie benötigt werden, im Gegensatz dazu, wenn sich etwas geändert hat.

Answer 2

Vielleicht können Sie die onEnter und onChange Callbacks nutzen, wenn Sie rootRoute konfigurieren.

In OnEnter Rückruf können Sie den ursprünglichen Routenpfad aufzeichnen. Im OnChange-Callback können Sie den aktuellen/nächsten Routenpfad vergleichen, den Verlauf des aufgezeichneten Pfads überprüfen und den Pfad aufzeichnen. Daher können Sie, da Sie bei jeder Änderung der Route den Routenverlauf überprüfen und vergleichen können, alle kreisförmigen Verbindungen anhalten.

Über den Status aller Komponenten zu speichern, wenn Sie redux verwenden, kann der gesamte App-Status in einem Objekt, dem Redux-Speicher speichern.

Wenn Sie den Status der Komponente zu diesem Zeitpunkt vor dem Verlassen speichern möchten, können Sie eine Aktion save component state in senden und den Status in componentWillMount wiederherstellen.

Hier ein Ausschnitt ist:

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