Comment se souvenir de l'état de la page avant de réagir

React implémente la méthode de mémorisation de l'état de la page avant de sauter : 1. Surveillez les changements de chemin et mettez à jour lastPath et currentPath dans le magasin redux lorsque le chemin change ; 2. Lorsque vous quittez la page A, enregistrez l'état de la page dans le magasin redux ; 3. Si le lastPath dans le magasin redux est égal au chemin de la page B, on considère que A est remis à l'état restauré par B, sinon il ne sera pas restauré.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment se souvenir de l'état de la page avant de se lancer dans React ?

La page React revient pour conserver le dernier état

Exigences

• La page A passe à la page B puis revient à la page A. La page A doit restaurer l'état avant de partir

• Page ; A et la page B ont plusieurs entrées. Si vous passez d'autres pages à la page A, la page A ne restaurera pas l'état.

Design

• Surveillez les changements de chemin et mettez à jour lastPath et currentPath vers le magasin redux lorsque le chemin change

• Lorsque vous quittez la page A, enregistrez l'état de la page dans le magasin redux ; Lors de l'entrée dans la page A, si le lastPath dans le redux store est égal au chemin de la page B, on considère que A est remis à l'état restauré par B, sinon il ne sera pas restauré.

• Implémentation

Le projet utilise la bibliothèque React-Router + DVA, et la partie implémentation impliquera des technologies associées. Surveillez les changements de chemin, surveillez les changements de chemin dans l'historique et enregistrez lastPath et currentPath. Ici, les abonnements DVA sont utilisés pour s'abonner à l'historique, et lorsque le chemin change, les informations sur le chemin sont synchronisées avec l'état.

const model = {
  namespace: "global",
  state: {
    pathName: { last: "", current: "" },
  },
  reducers: {
    setPathName(state: any, { pathName }: any) {
      state.pathName.last = state.pathName.current;
      state.pathName.current = pathName;
    },
   
  effects: {
  },
  subscriptions: {
    setup({ history, dispatch }: any) {
      return history.listen(({ pathName }: any) => {
        dispatch({ type: "global/setPathName", pathName });
      });
    }
  }
};

Synchronisez l'état avec le magasin redux lorsque la page est déchargée, par exemple :

componentWillUnmount() {
    const { dispatch } = this.props;
    const { activeKey } = this.state;
    dispatch({
      type: "projectInfo/setProjectInfoPage",
      payload: { activeKey }
    });
  }

Lorsque la page est rechargée, par exemple :

state = {
    activeKey: pathToRegexp(PagePath.B).exec(pathName.last) ? activeKey : ""
  };

pathToRegexp provient de la bibliothèque path-to-regexp et est utilisé pour la correspondance d'itinéraire . Il est utilisé ici pour déterminer si la page précédente correspond à la page B.

Autres solutions

Déterminez si la page A est renvoyée par la page B : ajoutez un état lorsque la page B revient, history.push({ pathname: path, state: {from} });, entrez la page A et jugez si elle est basé sur l'état Retour de la page B. Mais lorsque B a plusieurs entrées, vous devez connaître la source de la page lors du retour, sinon vous ne pouvez pas revenir, et la logique est légèrement compliquée et sujette aux erreurs.

Résumé

Cet article propose une solution de retour de page pour conserver le dernier état, qui convient aux situations où la page a plusieurs entrées et sorties. Cette solution utilise la méthode de surveillance des modifications de l'historique et d'enregistrement de l'adresse de la dernière page, fournissant ainsi une base pour savoir s'il faut restaurer l'état. Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!