Motifs de cycle de vie React 18
Référence pour migrer les trois méthodes unsafe de cycle de vie de composants classe vers des motifs conformes à React 18.3.1.
Guide de décision rapide
Avant de migrer une méthode de cycle de vie, identifiez la catégorie sémantique de ce qu'elle fait. Mauvaise catégorie = mauvaise migration. Le tableau ci-dessous vous oriente vers le fichier de référence correct.
componentWillMount - que fait-elle ?
| Ce qu'elle fait | Migration correcte | Référence |
|---|---|---|
Définit l'état initial (this.setState(...)) |
Déplacer dans constructor |
→ componentWillMount.md |
| Exécute un side effect (fetch, subscription, DOM) | Déplacer dans componentDidMount |
→ componentWillMount.md |
| Dérive l'état initial à partir des props | Déplacer dans constructor avec props |
→ componentWillMount.md |
componentWillReceiveProps - que fait-elle ?
| Ce qu'elle fait | Migration correcte | Référence |
|---|---|---|
| Async side effect déclenché par changement de props (fetch, cancel) | componentDidUpdate |
→ componentWillReceiveProps.md |
| Dérivation d'état pur à partir des nouvelles props (sans side effects) | getDerivedStateFromProps |
→ componentWillReceiveProps.md |
componentWillUpdate - que fait-elle ?
| Ce qu'elle fait | Migration correcte | Référence |
|---|---|---|
| Lit le DOM avant mise à jour (scroll, size, position) | getSnapshotBeforeUpdate |
→ componentWillUpdate.md |
| Annule les requêtes / exécute les effects avant mise à jour | componentDidUpdate avec comparaison précédente |
→ componentWillUpdate.md |
La règle du préfixe UNSAFE_
N'utilisez jamais UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, ou UNSAFE_componentWillUpdate comme correctif permanent.
Ajouter le préfixe supprime l'avertissement React 18.3.1 mais ne :
- Corrige PAS les problèmes de sécurité du mode concurrent
- Prépare PAS la base de code pour React 19 (où ces méthodes sont supprimées, avec ou sans le préfixe)
- Corrige PAS le problème sémantique sous-jacent que la migration est censée résoudre
Le préfixe UNSAFE n'est approprié que comme solution temporaire en attendant de planifier le vrai sprint de migration. Marquez tout ajout de préfixe UNSAFE avec :
// TODO: React 19 va supprimer ceci. Migrer avant la mise à jour vers React 19.
// Préfixe UNSAFE_ ajouté temporairement - remplacer par componentDidMount / getDerivedStateFromProps / etc.Fichiers de référence
Lisez le fichier de référence complet pour la méthode de cycle de vie que vous migrez :
references/componentWillMount.md- 3 cas avec code avant/après completreferences/componentWillReceiveProps.md- avertissements getDerivedStateFromProps, exemples completsreferences/componentWillUpdate.md- appairage getSnapshotBeforeUpdate + componentDidUpdate
Lisez le fichier pertinent avant d'écrire tout code de migration.