Comment démarrer rapidement avec VUE3.0 : Entrez
Les crochets sont utilisés pour utiliser l'état et d'autres fonctionnalités de React sans écrire de classes. Alors, que sont exactement les Hooks, pourquoi devrions-nous utiliser les Hooks, quels Hooks courants propose React et comment personnaliser les Hooks. Ce qui suit vous les révélera un par un.
Les Hooks sont traduits par des hooks. Les Hooks sont des fonctions au sein de composants de fonction qui sont responsables de l'accrochage aux fonctions externes.
React fournit des hooks courants et React prend également en charge les hooks personnalisés. Ces hooks sont utilisés pour introduire des fonctions externes dans les fonctions.
Lorsque nous devons introduire des fonctions externes dans un composant, nous pouvons utiliser les hooks fournis par React ou personnaliser les hooks.
Par exemple, si vous introduisez la fonction de gestion de l'état dans un composant, vous pouvez utiliser la fonction useState. L'utilisation de useState sera présentée en détail ci-dessous.
utiliser les Hooks Il y a deux raisons principales d'utiliser les Hooks :
Avant l'émergence des Hooks, React devait emprunter des modèles de conception complexes tels que des composants d'ordre élevé et des accessoires de rendu pour réaliser la réutilisation logique. Cependant, les composants d'ordre élevé généreront des nœuds de composants redondants, ce qui rendra le débogage plus compliqué.
Les Hooks nous permettent de réutiliser la logique d'état sans modifier la structure des composants. L'utilisation des Hooks personnalisés sera présentée en détail ci-dessous.
les composants de classe, le code de la même logique métier est dispersé dans différentes fonctions de cycle de vie du composant, et les Hooks peuvent regrouper le code de la même logique métier, permettant à la logique métier d'être clairement séparés, ce qui rend le code plus facile à comprendre et à maintenir.
useState est un Hook qui vous permet d'ajouter un état dans les composants de la fonction React.
Les exemples d'utilisation sont les suivants :
import React, { useState } from 'react' ;
fonction Exemple() {
// Déclarez une variable d'état appelée "count" const [count, setCount] = useState(0);
// ... Le code ci-dessus déclare un nombre de variables d'état avec une valeur initiale de 0 et met à jour le nombre actuel en appelant setCount.
useEffect vous permet d'effectuer des opérations d'effets secondaires dans les composants de fonction.
Les effets secondaires font référence à un morceau de code qui n'a rien à voir avec les résultats d'exécution actuels. Les opérations d'effets secondaires courants incluent l'acquisition de données, la définition d'abonnements et la modification manuelle du DOM dans les composants React.
useEffect peut recevoir deux paramètres, le code est le suivant :
useEffect(callback, dependencies)
Le premier paramètre est le rappel de fonction à exécuter, et le deuxième paramètre est les dépendances facultatives du tableau de dépendances.
La dépendance est facultative. Si elle n'est pas spécifiée, le rappel sera exécuté à chaque fois que le composant fonction est exécuté. S'il est spécifié, il ne sera exécuté que lorsque la valeur de la dépendance change.
Les exemples d'utilisation sont les suivants :
function Exemple() {
const [compte, setCount] = useState(0);
// Similaire à composantDidMount et composantDidUpdate :
utiliserEffet(() => {
// Mettre à jour le titre du document à l'aide de l'API du navigateur
document.title = `Vous avez cliqué sur ${count} fois`;
retour () => {
// Peut être utilisé pour le clearing, équivalent au composantWillUnmount du composant de classe
}
}, [count]); // Spécifiez la dépendance comme count et exécutez l'effet secondaire lorsque le nombre est mis à jour // ... Le code ci-dessus utilise useEffect pour implémenter la fonction d'effet secondaire lorsque le nombre de dépendances est mis à jour et l'efface en renvoyant la fonction de rappel Le résultat de la dernière exécution.
De plus, useEffect fournit quatre timings pour l'exécution des effets secondaires :
La fonction de rappel définie par useCallback ne redéclarera la fonction de rappel que lorsque les dépendances changent, garantissant ainsi que le composant ne créera pas de fonctions de rappel en double . Le composant qui reçoit cette fonction de rappel en tant qu'attribut n'aura pas besoin d'être restitué fréquemment .
Les exemples d'utilisation sont les suivants :
const memoizedCallback = useCallback(() => {
faire quelque chose (a, b)
}, [a, b]) Le code ci-dessus redéclarera la fonction de rappel uniquement lorsque les dépendances a et b changent.
La fonction de création définie par useMemo ne sera recalculée que lorsqu'une certaine dépendance change, ce qui facilite les calculs très coûteux qui ne seront pas répétés à chaque rendu, et le composant qui reçoit cette valeur calculée en tant que propriété ne le sera pas. Un nouveau rendu fréquent est nécessaire .
Les exemples d'utilisation sont les suivants :
const memoizedValue = useMemo(() => calculateExpensiveValue(a, b), [a, b])
Le code ci-dessus ne sera recalculé que lorsque les dépendances a et b changent.
useRef renvoie un objet ref, qui persiste tout au long du cycle de vie du composant.
Il a deux utilisations :
Voici un exemple de sauvegarde d'un nœud DOM :
function TextInputWithFocusButton() {
const inputEl = useRef (null)
const onButtonClick = () => {
// `current` pointe vers l'élément de saisie de texte inputEl.current.focus() qui a été monté sur le DOM
}
retour (
<>
)
} Le code ci-dessus crée un objet ref via useRef, enregistre la référence du nœud DOM et peut effectuer des opérations DOM sur ref.current.
Un exemple de partage de données entre plusieurs rendus est le suivant :
import React, { useState, useCallback, useRef } from 'react'
exporter la fonction par défaut Timer() {
//Définir l'état temporel pour enregistrer le temps accumulé de timing const [time, setTime] = useState(0)
// Définir une minuterie. Un tel conteneur est utilisé pour enregistrer une variable entre les rendus multi-composants const timer = useRef(null)
// Fonction de gestionnaire d'événements pour démarrer le timing const handleStart = useCallback(() => {
// Utilisez l'attribut current pour définir la valeur de ref timer.current = window.setInterval(() => {
setTime((heure) => heure + 1)
}, 100)
}, [])
// Fonction de gestion des événements de synchronisation en pause const handlePause = useCallback(() => {
// Utilisez clearInterval pour arrêter le timing window.clearInterval(timer.current)
minuterie.courant = null
}, [])
retour (
{temps / 10} secondes.
)
} Le code ci-dessus crée un objet ref avec un nom de variable timer via useRef. Cet objet peut être appelé lors du rendu entre composants, créer un nouveau timer lors du démarrage du timing et effacer le timer lorsque le timing est en pause.
useContext est utilisé pour recevoir un objet de contexte et renvoyer la valeur du contexte, ce qui peut permettre un partage de données à plusieurs niveaux.
Un exemple est le suivant :
//Créer un objet contextuel const MyContext = React.createContext(initialValue)
fonction App() {
retour (
// Passe la valeur du contexte via Context.Provider
Le code ci-dessus obtient le contexte défini dans le composant App via useContext, permettant ainsi le partage de données entre les composants hiérarchiques.
useReducer est utilisé pour introduire la fonction Réducteur.
Un exemple est le suivant :
const [state, dispatch] = useReducer(reducer, initialState)
Il accepte la fonction Réducteur et la valeur initiale de l'état comme paramètres et renvoie un tableau. Le premier membre du tableau est la valeur actuelle de l'état et le deuxième membre est la fonction de répartition qui envoie l'action.
Grâce aux Hooks personnalisés, la logique des composants peut être extraite en fonctions réutilisables.
Les Hooks personnalisés sont des fonctions qui présentent deux caractéristiques qui les distinguent des fonctions ordinaires :
Un exemple est le suivant :
import { useState, useCallback } from 'react'
fonction useCounter() {
// Définir le nombre, cet état est utilisé pour sauvegarder la valeur actuelle const [count, setCount] = useState(0)
// Implémente l'opération d'ajout de 1 const incrément = useCallback(() => setCount(count + 1), [count])
// Implémente l'opération de décrémentation de 1 const decrement = useCallback(() => setCount(count - 1), [count])
//Réinitialiser le compteur const reset = useCallback(() => setCount(0), [])
// Exporte les opérations de logique métier que l'appelant doit utiliser return { count, incrément, décrémentation, réinitialisation }
}
// composant 1
fonction MonComponent1() {
const { nombre, incrément, décrémentation, réinitialisation } = useCounter()
}
// composant 2
fonction MonComponent2() {
const { nombre, incrément, décrémentation, réinitialisation } = useCounter()
} Le code ci-dessus réutilise facilement la logique métier entre le composant MyComponent1 et le composant MyComponent2 en personnalisant Hooks useCounter.
React fournit officiellement la bibliothèque React-use, qui encapsule un grand nombre de Hooks personnalisés pouvant être utilisés directement, nous aidant à simplifier la logique interne des composants et à améliorer la lisibilité et la maintenabilité du code.
Parmi eux, nos Hooks personnalisés couramment utilisés sont :
Vous pouvez vous rendre sur le site officiel de React-Use pour savoir comment l'utiliser.
Cet article présente les React Hooks sous quatre aspects : ce que sont les Hooks, pourquoi utiliser les Hooks, ce que les Hooks courants fournissent et comment personnaliser les Hooks. Je pense que tout le monde a une compréhension plus approfondie des React Hooks.
J'espère que cela vous aidera, merci d'avoir lu ~