Qu'est-ce que la fonction crochet ?

Une fonction hook est un code qui traite et intercepte les appels de fonction, les événements ou les messages transmis entre les composants logiciels. Il s'agit essentiellement d'un programme utilisé pour traiter les messages système. Elle est connectée au système via des appels système

.

[Cours recommandés : Tutoriel React, Tutoriel Vue.js ]

[Article recommandé : Est-ce qu'il est préférable de réagir ou de vuejs 】

Qu'est-ce qu'une fonction hook ?

En programmation informatique, les fonctions hook sont principalement utilisées pour passer entre des composants logiciels via des appels de fonction d'interception, des messages ou des événements qui modifier ou améliorer le comportement d'un système d'exploitation, d'une application ou d'un autre composant logiciel. Le code qui gère cet appel de fonction, cet événement ou ce message intercepté est appelé un hook. Son essence est un programme utilisé pour traiter les messages système et les connecter au système via des appels système. Les fonctions Hook peuvent être utilisées à de nombreuses fins, notamment le débogage et l’extension des fonctionnalités. Fonctions de hook courantes : fonction de cycle de vie de React, fonction de cycle de vie de Vue, etc.

La signification des Hooks React

Les Hooks React sont utilisés pour se connecter des composants de fonction à React state Fonctions simples et fonctions de cycle de vie

Cela signifie que les hooks nous permettent de manipuler facilement l'état de nos composants fonctionnels sans avoir à les convertir en composants de classe. Cela nous évite d’avoir à gérer tout le code passe-partout impliqué.

Les hooks ne fonctionnent pas à l'intérieur des classes, ils vous permettent d'utiliser React sans classes. Et, en les utilisant, nous pouvons complètement éviter d'utiliser des méthodes de cycle de vie telles que ComponentDidMount, ComponentDidUpdate, etc. Au lieu de cela, nous utiliserons des hooks intégrés tels que useEffect, useMutationEffect ou useLayoutEffect.

Les Hooks sont de simples fonctions JavaScript, mais elles imposent deux règles supplémentaires

(1) N'appelez les Hooks qu'au niveau supérieur. N'appelez pas les Hooks dans des boucles, des conditions ou des fonctions imbriquées (2) Appelez uniquement les Hooks à partir des composants fonctionnels React. N'appelez pas les Hooks à partir de fonctions JavaScript classiques. Il existe un autre endroit valide pour appeler des Hooks personnalisés.

Nous devons nous rappeler que dans le contexte des composants fonctionnels React, auparavant ces composants étaient appelés sans état, mais maintenant les hooks nous fournissent des moyens d'utiliser l'état dans ces composants

La signification de Vuejs Hook

Un composant dans Vuejs a un cycle de vie, qui est géré par Vue lui-même lorsqu'il crée le composant. Installez le. composant dans le DOM, mettez à jour le composant et détruisez-le. Autrement dit, chaque composant a ses propres événements de cycle de vie, et nous pouvons nous concentrer sur les moments clés de ce cycle de vie en implémentant un ou plusieurs hooks de cycle de vie. Ces hooks sont appelés par Vue elle-même, nous offrant ainsi la possibilité d'utiliser le composant. Ajoutez notre propre code à des étapes spécifiques du cycle de vie.

Vue dispose de huit hooks de cycle de vie, et la clé pour s'en souvenir est de savoir que quatre d'entre eux sont des événements déclenchés, indiquant que l'événement réel se produira. Ils commencent par "avant" avant le crochet réel et sont tirés avant le crochet réel.

Les huit hooks du cycle de vie de Vue

(1) beforeCreate : Il s'agit du premier hook appelé après l'initialisation de l'instance Vue. À ce stade, les événements d'observation des données, les propriétés calculées et les observateurs n'ont pas encore été établis. Par conséquent, nous ne pouvons interagir avec aucune partie du composant.

(2) créé : ce hook est appelé après la création de l'instance, à ce stade, l'instance a terminé le traitement et l'observation des données, les propriétés calculées, les méthodes, les observateurs et les rappels d'événements ont été établis. Il n'est pas possible d'interagir avec le DOM à ce stade car le composant

n'a pas encore été monté (3) avantMount : A ce stade, le modèle peut être compilé à partir du modèle ou des options de rendu, ou à partir du externalHTML de l'élément avec lequel Vue a été initialisé. Le modèle n'a pas encore été rendu, veuillez noter que cette fonction hook ne sera pas appelée lors du rendu côté serveur

(4) monté : appelé après le montage de l'instance, où l'attribut el est déterminé par le nouveau créé une machine virtuelle. $elremplacement. Si l'instance racine est montée sur un élément du document, vm$el sera également dans le document lorsque le montage est appelé. Après avoir appelé le hook ci-joint, le composant est entièrement fonctionnel et nous pouvons pleinement interagir avec lui.

Une chose à noter est que la fonction hook ne garantit pas que l'élément a été ajouté au DOM. Pour exécuter du code dépendant du DOM à ce stade, vous devez mettre le code dans une méthode de rappel et le placer dans la fonction Vue.nextTick(). Exemple

(5) beforeUpdate : Avant de patcher le DOM, nos données peuvent être modifiées à tout moment et le DOM doit être mis à jour. Notez que cette fonction hook n'est pas appelée lors du rendu côté serveur, puisque seul le rendu initial est effectué côté serveur.

<template>
  <p>I&#39;m text inside the component.</p>
</template>
<script>
export default {
  mounted() {
    // Element might not have been added to the DOM yet
    this.$nextTick(() => {
        // Element has been definitely added to the DOM
       console.log(this.$el.textContent); // I&#39;m text inside the component.
    }
  }
}
</script>

(6) mis à jour : Déclenchez la fonction hook une fois le changement terminé. Lorsque cette fonction est appelée, le DOM du composant est mis à jour, afin que les opérations liées au DOM puissent être effectuées ici. Cependant, dans la plupart des cas, le changement d’état au sein des hooks doit être évité. Il est généralement préférable d'utiliser des propriétés calculées ou des observateurs.

Il convient de noter que la mise à jour ne garantit pas que tous les composants enfants seront également restitués. Si vous souhaitez attendre que la vue entière soit restituée, vous pouvez utiliser vm, $el

dans la mise à jour (7) beforeDestroy : appelé avant de détruire l'instance Vue. A ce stade, l’instance est encore pleinement opérationnelle. Le nettoyage nécessaire peut être effectué ici. Notez que ce hook n'est pas appelé lors du rendu côté serveur.

(8) Destroyed : appelé après la destruction de l'instance Vue. Lorsque cette fonction est appelée, toutes les directives de l'instance Vue ont été dissociées, tous les écouteurs d'événements ont été supprimés et toutes les instances enfants de Vue ont été détruites. Notez que ce hook n'est pas appelé lors du rendu côté serveur.

Résumé : ce qui précède est une introduction aux fonctions de hook, j'espère que cela sera utile à tout le monde

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!