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

Cet article vous présentera les hooks, expliquera pourquoi il est recommandé d'utiliser les hooks pour le développement et présentera les deux hooks les plus couramment utilisés dans React. J'espère qu'il sera utile à tout le monde !

Tout d'abord, présentons ce qu'est un hook

Hook est une nouvelle fonctionnalité de React 16.8. Il est spécialement utilisé dans les composants fonctionnels. Il peut remplacer d'autres fonctionnalités de React dans les composants de classe et est couramment utilisé dans le travail réel. [Recommandations associées : Tutoriel vidéo Redis]

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

hook est spécialement utilisé pour coopérer avec le développement de composants fonctionnels. Il peut être utilisé pour remplacer certains cycles de vie des composants de classe. pour éviter toute confusion causée par un grand nombre de cela, les Hooks facilitent le développement et permettent aux développeurs de comprendre plus facilement le code

Ce qui précède est un simple résumé de mon expérience personnelle. 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) équivaut à ajouter une valeur d'attribut à cela. state dans le composant de classe

variable est équivalent à la valeur de this.state.variable dans le composant de classe

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

import React,(useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

useEffect

Dans le code :

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

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    
    useEffect(() => {
        //这个return是在该组件监测的数据变化时或者被卸载时调用的，被卸载时调用可以相当于componentWillUnmount钩子 
        return () => {
            console.log('该组件被卸载了')
        }
    }, [variable])//第二个参数传了[variable]，表示检测variable的更新变化，一旦variable变化就会再次执行useEffect的回调
                  //第二个参数传了[],表示谁都不检测只执行一次useEffect的回调，相当于componentDidMount钩子
                  //第二个参数不传参，只要该组件有state变化就会执行useEffect的回调，相当于componentDidUpdate钩子
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

Choses à noter lors de l'utilisation de hooks

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

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //这里才是正确的
   useEffect(() => {})
    
   //错误1，使用了条件判断
   if(true) {
        useEffect(() => {})
   }
   //错误2，使用了循环
   while(true) {
        useEffect(() => {})
   }
  //错误3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}

2. Impossible d'utiliser des Hooks en dehors des fonctions des composants

import React,(useState, useEffect) from 'react'
//错误1，在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2，在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在组件函数里使用才是正确的
   const [variable, setVariable] = useState(0);
}

3. vous pouvez installer le plug-in eslint-plugin-react-hooksESLint pour vérifier les erreurs dans le code.

Custom hook

hook est une fonction destinée à faciliter le partage de logique entre les composants. En fait, ils sont encapsulés. . Le hook personnalisé appelle également le hook fourni avec React. Le nom doit commencer par use

//自定义hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定义hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

Vous vous demandez peut-être si le même Hook sera utilisé dans plusieurs composants pour partager l'état ?

La réponse est : non. Parce que chaque appel au hook fourni avec React est indépendant et ne s'affecte pas les uns les autres, donc le hook personnalisé est indépendant et ne s'affecte pas lorsqu'il est appelé plusieurs fois. Pour plus de connaissances sur la programmation, veuillez visiter :

! !

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!