Qu'est-ce qu'un crochet ? Parlons de deux Hooks couramment utilisés dans React

Comment démarrer rapidement avec VUE3.0 : Avant de commencer l'apprentissage,

commençons par présenter ce qu'est un hook.

Il s'agit d'une nouvelle fonctionnalité de React 16.8. Elle est spécialement utilisée dans les composants fonctionnels. Elle peut remplacer d'autres fonctionnalités de React dans les composants de classe. et est couramment utilisé dans le travail réel.

Pourquoi est-il recommandé d'utiliser des hooks pour le développement ?

Les hooks sont spécialement utilisés pour coopérer avec le développement de composants fonctionnels. Ils peuvent donc être utilisés pour remplacer certains cycles de vie des composants de classe afin d'éviter toute confusion causée par un grand nombre de ceux-ci. les hooks sont pratiques pour le développement et plus faciles à comprendre pour les développeurs.

Ce qui précède est un bref résumé personnel. Pour plus de raisons, veuillez vous référer au site officiel de React :

https://react.docschina.org/docs/hooks-intro. html#motivation

useState

Dans le code :

React.useState(0) est équivalent à this dans le composant de classe L'ajout d'une

variable de valeur d'attribut à state est équivalent à this.state dans le composant de classe La valeur de la variable

setVariable peut être utilisée

pour modifier la valeur de la variable, qui peut être équivalente à this.setState dans le composant de classe

import React, (useState) from 'react'

exporter la fonction par défaut useState_Demo() {
    const [variable, setVariable] = useState(0);//Grâce à l'affectation de déstructuration, nous obtenons la variable et setVariable
    fonction changementVariable(){
        setVariable((variable) => variable +1) //Le paramètre passé dans le rappel de setVariable est variable
    }
    rendre (
        <div> 
            <button onclick = {change}>Cliquez sur moi pour créer une variable+1</button>
        </div>
    )
}

useEffect

 :

Comme le montre le code suivant, l'utilisation de useEffect remplace l'utilisation de composantDidMoun, composantDidUpdate et composantWillUnmount dans le composant de classe

import React, (useState, useEffect) de 'react'

exporter la fonction par défaut useState_Demo() {
   const [variable, setVariable] = useState(0);//Grâce à l'affectation de déstructuration, nous obtenons la variable et setVariable
    
    utiliserEffet(() => {
        //Ce retour est appelé lorsque les données surveillées par le composant changent ou lorsqu'il est désinstallé, son appel peut être équivalent au hook return() de composantWillUnmount () => {.
            console.log('Le composant a été désinstallé')
        }
    }, [variable])//Le deuxième paramètre est passé [variable], ce qui signifie que le changement de mise à jour de la variable est détecté. Une fois la variable modifiée, le rappel useEffect sera à nouveau exécuté //Le deuxième paramètre est passé []. , ce qui signifie que personne La détection n'exécute le rappel useEffect qu'une seule fois, ce qui équivaut au hook composantDidMount //Le deuxième paramètre ne transmet pas les paramètres Tant que le composant a un changement d'état, le rappel useEffect sera exécuté, ce qui est équivalent à la fonction de hook composantDidUpdate changeVariable(){
        setVariable((variable) => variable +1) //Le paramètre passé dans le rappel de setVariable est variable
    }
    rendre (
        <div> 
            <button onclick = {change}>Cliquez sur moi pour créer une variable+1</button>
        </div>
    )
}

Points à noter lors de l'utilisation de hooks

 : 1. Utilisez uniquement des Hooks dans la couche la plus externe des fonctions du composant. N'appelez pas de Hooks dans des boucles, des conditions ou des fonctions imbriquées,

importez React (useEffect) depuis 'react'.
exporter la fonction par défaut useState_Demo() {
   //C'est le bon useEffect(() => {})
    
   //Erreur 1, utilisation du jugement conditionnel if(true) {
        utiliserEffet(() => {})
   }
   //Erreur 2, utilisation de la boucle while(true) {
        utiliserEffet(() => {})
   }
  //Erreur 3, utilisation de useEffect(() => { imbriqué
      utiliserEffet(() => {})
  })
}

import React, (useState, useEffect) de 'react'

ne peut pas être utilisé en dehors de la fonction du composant.

//Erreur 1, useState est utilisé en dehors de la fonction du composant
const [variable, setVariable] = useState(0);
//Erreur 2, useEffect est utilisé en dehors de la fonction du composant
utiliserEffet(() => {})
exporter la fonction par défaut useState_Demo() {
   //Il est correct de l'utiliser dans le composant function const [variable, setVariable] = useState(0);
}

3. Afin d'éviter les erreurs ci-dessus, vous pouvez installer le plug-in ESLint eslint-plugin-react-hooks pour vérifier les erreurs dans le code.

Hooks personnalisés

Un hook est une fonction destinée à faciliter le partage de logique entre. composants, qui est en fait une réutilisation. La fonction est encapsulée et le hook personnalisé appelle également le hook fourni avec React. Le nom doit commencer par use

// Custom hook.
fonction useHook(initState) {
  const [variable, setVariable] = useState(initState)
  renvoyer une variable ;
}
//Utiliser un hook personnalisé
exporter la fonction par défaut useState_Demo() {
    const variableState = useHook(0)
}

Vous vous demandez peut-être si l'utilisation du même Hook dans plusieurs composants partagera l'état ?

La réponse est : non. Étant donné que chaque appel au hook fourni avec React est indépendant et ne s'affecte pas les uns les autres, le hook personnalisé est donc indépendant et ne s'affecte pas s'il est appelé plusieurs fois.