Conserver les react-router routed-components pour tous les états de l’historique

Conserver les react-router routed-components

Le problème

Je fais une application mobile avec Cordova. Utilisez le react-router@2.0.0 + ReactCSSTransitionGroup pour implémenter l’animation « jeu de cartes ». J’ai une arborescence Routes stricte sans possibilité de liens circulaires.

Pour améliorer les performances et enregistrer l’état des composants de route précédents, je souhaite conserver tout leur historique en les démontant uniquement sur l’état pop ou l’état de remplacement.

Comment faire?

La solution

Êtes-vous sûr que cela aiderait réellement? Si je comprends votre point, vous aimeriez « mettre en cache » les composants de sorte que lorsque vous revisitez une route existante, il n’est pas nécessaire de recréer la structure DOM (je pense que Ionic a une option pour faire exactement cela).

Je ne sais pas quel avantage vous obtiendriez car React utilise une implémentation DOM virtuelle qui devrait déjà mettre à jour le DOM de manière efficace. Lorsque vous passez d’une route à une autre, seul un minimum de nœuds DOM serait modifié, en fonction du diff avec le vrai DOM et votre représentation React.

Si vous souhaitez « mettre en cache » l’état de vos composants afin de ne pas avoir à le recalculer à chaque fois, il serait alors beaucoup plus facile d’utiliser quelque chose comme redux et de resélectionner (https://github.com/reactjs/reselect ) pour mettre à jour les données que vous fournissez à vos composants uniquement lorsque cela est nécessaire, complétant essentiellement l’extraction de l’état de vos composants. Votre état survivrait alors au démontage d’un composant.

Reselect utilise la fonction de mémorisation pour recalculer les accessoires que vous transmettez à vos composants uniquement lorsque cela est nécessaire, par opposition à chaque fois que quelque chose a changé.

Une solution avec Ionic

Ionic fournit cette fonctionnalité avec son composant IonRouterOutlet pour permettre les transitions entre les pages. Ce n’est pas tout à fait trivial de suivre l’implémentation mais vous pouvez peut-être jeter un œil à leur Repo.

Ce qu’ils font, c’est essentiellement envelopper le BrowserRouter de React et conserver toutes les routes rendues – en basculant leur visibilité via css.

Notez que cela ne vise pas à améliorer les performances mais à permettre des transitions. Plutôt que d’améliorer les performances, cela pourrait en fait les entraver. Par exemple, pour nettoyer les ressources via les fonctions de nettoyage useEffect ou componentWillUnmount().

La map React

Vous pouvez peut-être tirer parti des rappels onEnter et onChange lors de la configuration de rootRoute.

Dans le rappel onEnter, vous pouvez enregistrer le chemin d’accès initial. Dans le rappel onChange, vous pouvez comparer le chemin d’accès actuel/suivant, vérifier l’historique des chemins enregistrés et enregistrer le chemin. Par conséquent, puisque vous pouvez vérifier et comparer le chemin d’accès à chaque fois que l’itinéraire change, vous pouvez arrêter tous les liens circulaires.

À propos de l’enregistrement de l’état de tous les composants, si vous utilisez redux, tout l’état de l’application peut être enregistré dans un objet, le magasin redux.

Si vous souhaitez enregistrer l’état du composant à ce moment-là avant de partir, vous pouvez envoyer une action d’enregistrement de l’état du composant dans componentWillUnmount et récupérer l’état dans componentWillMount.

Voici un extrait :

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) {
        ...
    }
}
Conserver les react-router routed-components

 455 total views,  2 views today

Add a Comment

Your email address will not be published.