Comment implémenter des invites avant la désinstallation du composant React, le saut d'itinéraire et la fermeture de la page (actualisation)

Le contenu que cet article vous apporte concerne les méthodes d'implémentation de la désinstallation des composants React, le saut de routage et les invites avant la fermeture de la page (actualisation). Il a une certaine valeur de référence. J'espère que cela vous aidera. Vous avez aidé.

Le cycle de vie du déchargement du composant React, le saut de routage et la fermeture de la page se ressemblent quelque peu. Par exemple, le composant actuel est sur le point de disparaître de la fenêtre, mais en fait les événements déclenchés ne sont pas les mêmes. . Commençons par un cas pratique :

Un utilisateur sur la page d'édition d'article d'une application monopage est en train d'éditer un article mais ne l'a pas encore enregistré.

Lorsque l'utilisateur saute accidentellement vers un autre itinéraire, il faut lui rappeler s'il doit continuer à sauter. Ce processus doit déclencher le saut d'itinéraire et la désinstallation du composant

Et l'utilisateur clique accidentellement sur le bouton de fermeture de l'onglet ; , ou actualisé la page. Ce processus déclenche l'événement de déchargement de la page ;

Dans ce cas, nous devons implémenter :

1. Une boîte de dialogue apparaît lorsque l'utilisateur accède à la page (le routage adopte le mode historique)

2. Une boîte de dialogue apparaît lorsque l'utilisateur ferme la page

componentWillUnmount

Tout d'abord, cette fonction hook est une fonction appelée avant le composant est désinstallé. Cela n’empêche pas la désinstallation du composant actuel. N'essayez donc pas de créer une invite ici, car même si cela vous est demandé, le composant sera toujours désinstallé et l'article disparaîtra toujours.

Route Guard-<Prompt/>

Afin de mettre en œuvre la première fonction, un jugement est nécessaire avant de passer à l'itinéraire. Le garde-route précédent a été annulé après

(en fait je n'ai pas étudié la version précédente, cette description est tirée d'Internet). Après react-router-dom 4.0, vous pouvez compter sur le composant react-router-dom 4.0 pour implémenter cette fonction. Lien vers le document↗<Prompt/>

Ajoutez ce composant à n'importe quelle partie du composant de votre page d'édition d'article

import {Prompt} from 'react-router-dom';
const Editor=()=>{
    return (
        <div>
          <Prompt
            when={true}
            message={location => '文章要保存吼，确定离开吗？'}
          />
        </div>
    )
}

Une chose à noter ici est que lorsque vous utilisez <Prompt/>, votre Jump de routage doit être implémenté via et ne peut pas s'appuyer sur la balise native

Lorsque vous cliquez sur Annuler, vous resterez sur la page actuelle. Jusqu'à présent, la fonction de rappel à l'utilisateur de sauvegarder lors des sauts de routage a été implémentée.

Événement de fermeture de la fenêtre avant déchargement

Pour implémenter la deuxième fonction, vous devez compter sur la surveillance de la fenêtre. L'application d'événements window dans les applications React est bien moins fréquente que celle des événements DOM, je ne l'ai donc pas rencontré depuis longtemps et c'est encore un peu inconnu. Le plus important est de savoir quand effectuer la surveillance ?

Devrait écouter les événements lorsque le composant est monté et supprimer l'écoute des événements lorsque le composant est démonté. Parce que j'ai commencé à adopter pleinement les nouvelles fonctionnalités des hooks, useEffect est utilisé ici.

import React,{useEffect} from 'react';

const Editor=()=>{

 //监听窗口事件
    useEffect(() => {
        const listener = ev => {
            ev.preventDefault();
            ev.returnValue='文章要保存吼，确定离开吗？';
        };
        window.addEventListener('beforeunload', listener);
        return () => {
            window.removeEventListener('beforeunload', listener)
        }
    }, []);
    
//return ...
}

Il y a quelques points à noter ici :

1. Le deuxième paramètre de useEffect est un tableau vide, ce qui signifie que seuls deux hooks, ComponentDidMount et ComponentWillUnmount, sont appelés <.>

2. Le deuxième paramètre de surveillance et de suppression des événements est la même fonction de traitement des événements

3. La confirmation, l'invite et l'alerte dans l'événement beforeunload seront ignorées. Au lieu de cela, il existe une boîte de dialogue de navigateur intégrée. (Référence :

MDN|beforeunload

)4. Il doit y avoir une returnValue et c'est une chaîne non vide, mais dans certains navigateurs, cette valeur ne sera pas utilisée comme fenêtre contextuelle. message

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!