Concept principal de réagir || Réagir

Dans React.js, plusieurs méthodes sont disponibles pour gérer les composants, gérer les événements du cycle de vie et travailler avec des hooks. Ci-dessous, j'ai classé les méthodes les plus importantes en différentes sections :

1. Méthodes de cycle de vie des composants (composants de classe)

Dans React composants de classe, il existe plusieurs méthodes de cycle de vie que vous pouvez remplacer pour exécuter du code à des moments précis du cycle de vie d'un composant :

Phase de montage (initialisation d'un composant)

• constructeur()

  • Appelé avant le montage du composant.
  • Utile pour initialiser des gestionnaires d'événements d'état ou de liaison.

• getDerivedStateFromProps(props, state) statique

  • Appelé avant le rendu, à la fois lors du montage initial et lors des mises à jour ultérieures.
  • Permet à l'état d'être mis à jour en fonction des accessoires.

• rendu()

  • La seule méthode requise dans un composant de classe.
  • Devrait renvoyer les éléments React, qui seront rendus dans le DOM.

• componentDidMount()

  • Appelé immédiatement après le montage d'un composant.
  • Couramment utilisé pour récupérer des données, configurer des abonnements ou effectuer des appels API.

Phase de mise à jour (re-rendu en raison de changements d'accessoires ou d'état)

• getDerivedStateFromProps(props, state) statique

  • (Également appelé lors des mises à jour) Utilisé pour mettre à jour l'état en fonction des accessoires.

• shouldComponentUpdate(nextProps, nextState)

  • Détermine si un nouveau rendu est nécessaire.
  • Peut être utilisé pour optimiser les performances en évitant les rendus inutiles.

• rendu()

  • (Appelé à nouveau lors des mises à jour)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • Appelé juste avant que les modifications du DOM virtuel ne soient appliquées au DOM réel.
  • Utile pour capturer des informations (comme la position de défilement) avant les mises à jour.

• componentDidUpdate(prevProps, prevState, instantané)

  • Appelé immédiatement après la mise à jour.
  • Utile pour effectuer des opérations après la mise à jour du composant (par exemple, effectuer des appels d'API en fonction des modifications apportées aux accessoires).

Phase de démontage (nettoyage avant retrait d'un composant)

• componentWillUnmount()
  • Appelé juste avant qu'un composant ne soit démonté et détruit.
  • Utile pour nettoyer les abonnements, les minuteries ou les auditeurs d'événements.

Gestion des erreurs

• componentDidCatch(erreur, info)
  • Appelé en cas d'erreur lors du rendu, dans une méthode de cycle de vie ou dans le constructeur d'un composant enfant.
  • Utile pour enregistrer les erreurs et afficher l'interface utilisateur de secours.

2. React Hooks (composants de fonction)

Les hooks sont un nouvel ajout dans React 16.8 qui vous permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe.

Crochets de base

• useState(initialState)
  • Vous permet d'ajouter un état à un composant fonctionnel.
  • Renvoie une variable d'état et une fonction pour la mettre à jour.

  const [count, setCount] = useState(0);

• useEffect(rappel, dépendances)
  • Similaire à composantDidMount, composantDidUpdate et composantWillUnmount combinés.
  • Utilisé pour les effets secondaires tels que la récupération de données, les abonnements ou la modification manuelle du DOM.

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(Context)
  • Vous permet de vous abonner au contexte React sans imbriquer les composants Consumer.

  const value = useContext(MyContext);

Crochets supplémentaires

• useReducer(réducteur, initialState)
  • Une alternative à useState pour gérer une logique d'état plus complexe.

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback(rappel, dépendances)
  • Renvoie une version mémorisée d'une fonction de rappel, utile pour optimiser les composants enfants qui reposent sur l'égalité des références.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo(créer, dépendances)
  • Renvoie une valeur mémorisée, utilisée pour optimiser les calculs coûteux.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(initialValue)
  • Renvoie un objet ref mutable, qui persiste entre les rendus.
  • Utile pour accéder aux éléments DOM ou stocker des valeurs mutables.

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, dépendances)
  • Personnalise la valeur d'instance exposée lors de l'utilisation de ref avec forwardRef.

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect(rappel, dépendances)

  • Similaire à useEffect, mais se déclenche de manière synchrone après toutes les mutations du DOM.
  • Utile pour lire la mise en page à partir du DOM et restituer de manière synchrone.

• useDebugValue(valeur)

  • Peut être utilisé pour afficher une étiquette dans React DevTools pour les hooks personnalisés.

  const [count, setCount] = useState(0);

3. Méthodes de gestion des événements

React fournit des méthodes de gestion des événements, similaires à la gestion habituelle des événements DOM, mais avec quelques différences :

• onClick
• onChange
• onSubmit
• onFocus
• onBlur
• onKeyPress

Exemple :

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. Autres méthodes React

Voici des méthodes supplémentaires qui pourraient vous être utiles :

• React.createRef()

  • Utilisé pour créer des références dans les composants de classe.

• React.forwardRef()

  • Passez les références aux composants enfants.

• React.memo(Composant)

  • Un composant d'ordre supérieur qui empêche le nouveau rendu si les accessoires n'ont pas changé.

• React.lazy()

  • Utilisé pour le fractionnement de code et le chargement paresseux de composants.

• Réagir.Suspense

  • Utilisé en combinaison avec React.lazy() pour afficher une solution de repli lors du chargement d'un composant paresseux.

5. Méthodes de routeur React (pour le routage)

• useNavigate() (React Router v6)
• useParams()
• useLocation()
• useMatch()

Exemple :

  const value = useContext(MyContext);

6. Types d'accessoires et accessoires par défaut

• propTypes

  • Utilisé pour valider le type d'accessoires passés à un composant.

• defaultProps

  • Utilisé pour définir les valeurs par défaut des accessoires.

Exemple :

  const [state, dispatch] = useReducer(reducer, initialState);

Conclusion

• Les Les composants de classe sont plus traditionnels et utilisent des méthodes de cycle de vie.
• Les composants fonctionnels exploitent les hooks et sont généralement préférés dans le développement React moderne en raison de leur simplicité et de leurs avantages en termes de performances.

Utilisez des composants de classe lorsque vous avez besoin d'un contrôle précis sur le cycle de vie des composants et des hooks lorsque vous souhaitez une API plus simple et plus propre.

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!