ReactjsCycle de vie

Monture
Mise à jour
démonter

Composant fonctionnel

Montage :
useEffect(() => {...}, []) : Le hook useEffect avec un tableau de dépendances vide ne s'exécute qu'une seule fois après le rendu initial, similaire à composantDidMount.

Mise à jour :
useEffect(() => {...}, [dependencies]) : lorsque vous transmettez des dépendances à useEffect, il s'exécutera chaque fois que l'une des dépendances (état ou accessoires) change, similaire à composantDidUpdate.
useState() : ce hook met à jour l'état, déclenchant un nouveau rendu.
useMemo() et useCallback() : ces hooks aident à optimiser les performances lors des mises à jour en mémorisant les valeurs et les fonctions.

Démonter :
useEffect(() => {... return () => {...}}) : Vous pouvez renvoyer une fonction de nettoyage de useEffect à exécuter lorsque le composant se démonte, similaire à componentWillUnmount.

Composant de classe

Montage :
constructeur()
Initialise le composant, configure l'état et lie les méthodes.

getDrivedStateFromProps()
Synchronise l'état avec les accessoires avant le rendu. Pas souvent utilisé.

rendu()
Décrit ce qu'il faut restituer (UI) et renvoie JSX.

componentDidMount()
Appelé après le montage du composant (utile pour récupérer des données, paramètre
abonnements).

Mise à jour :
getDrivedStateFromProps()
Synchronise l'état avec les accessoires avant le rendu (également appelé lors des mises à jour).

shouldComponentUpdate()
Décide si un nouveau rendu est nécessaire (utilisé pour l'optimisation des performances)

rendu()
Renvoie le composant lorsque l'état ou les accessoires changent.

getSnapshotBeforeUpdate()
Capture des informations (comme la position de défilement) avant que le DOM ne change

componentDidUpdate()
Appelé après le nouveau rendu du composant (utile pour interagir avec
Requêtes DOM ou réseau).

Démonter :
componentWillUnmount()
Appelé avant que le composant ne soit supprimé du DOM (utilisé pour le nettoyage,
comme la suppression d'abonnements)

Gestion des erreurs
componentDidCatch()
Détecte les erreurs dans les composants enfants et permet la gestion des erreurs (React
16 ).

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!