¿Qué es un gancho? Hablemos de dos ganchos de uso común en React

Cómo comenzar rápidamente con VUE3.0: antes de comenzar a aprender,

primero presentemos qué es un gancho.

El gancho es una nueva característica de React 16.8. Se usa especialmente en componentes funcionales. Puede reemplazar otras características de reacción en componentes de clase. y se utiliza comúnmente en el trabajo real.

¿Por qué se recomienda utilizar ganchos para el desarrollo?

Los ganchos se utilizan especialmente para cooperar con el desarrollo de componentes funcionales. Se pueden utilizar para reemplazar algunos de los ciclos de vida de los componentes de clase para evitar la confusión causada por una gran cantidad de ellos. Los ganchos son convenientes para el desarrollo y más fáciles para los desarrolladores de comprender el código.

Lo anterior es un breve resumen personal. Para más razones, consulte el sitio web oficial de reacción:

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

useState

En el código:

React.useState(0) es equivalente a this en el componente de clase. Agregar una

variable de valor de atributo al estado es equivalente a this.state en el componente de clase.

Se puede usar el valor de la variable setVariable. para modificar el valor de la variable, que puede ser equivalente a this.setState en el componente de clase

import React, (useState) de 'react'

exportar la función predeterminada useState_Demo() {
    const [variable, setVariable] = useState(0);// Mediante la asignación de desestructuración, obtenemos la variable y setVariable
    función cambioVariable(){
        setVariable((variable) => variable +1) //El parámetro pasado en la devolución de llamada de setVariable es variable
    }
    prestar (
        <div> 
            <button onclick = {cambiar}>Haz clic en mí para hacer variable+1</button>
        </div>
    )
}

useEffect

:

como se puede ver en el siguiente código, el uso de useEffect reemplaza el uso de componenteDidMoun, componenteDidUpdate y componenteWillUnmount en el componente de clase

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

exportar la función predeterminada useState_Demo() {
   const [variable, setVariable] = useState(0);// Mediante la asignación de desestructuración, obtenemos la variable y setVariable
    
    utilizarEfecto(() => {
        // Este retorno se llama cuando los datos monitoreados por el componente cambian o cuando se desinstala. Al desinstalarlo, llamarlo puede ser equivalente al retorno del gancho componenteWillUnmount () => {.
            console.log('El componente ha sido desinstalado')
        }
    }, [variable]) // Se pasa el segundo parámetro [variable], lo que significa que se detecta el cambio de actualización de la variable. Una vez que la variable cambia, la devolución de llamada useEffect se ejecutará nuevamente // Se pasa el segundo parámetro [] , Lo que significa que nadie La detección solo ejecuta la devolución de llamada useEffect una vez, lo que es equivalente al gancho componenteDidMount // El segundo parámetro no pasa parámetros Siempre que el componente tenga un cambio de estado, se ejecutará la devolución de llamada useEffect, que es. es equivalente a la función de enlace de componenteDidUpdate changeVariable(){
        setVariable((variable) => variable +1) //El parámetro pasado en la devolución de llamada de setVariable es variable
    }
    prestar (
        <div> 
            <button onclick = {cambiar}>Haz clic en mí para hacer variable+1</button>
        </div>
    )
}

Cosas a tener en cuenta al usar ganchos

: 1. Utilice solo ganchos en la capa más externa de las funciones de los componentes. No llame a ganchos en bucles, condiciones o funciones anidadas,

importe React, (useEffect) desde 'react'.
exportar la función predeterminada useState_Demo() {
   //Este es el useEffect correcto(() => {})
    
   //Error 1, usando juicio condicional if(true) {
        utilizarEfecto(() => {})
   }
   //Error 2, usando el bucle while(true) {
        utilizarEfecto(() => {})
   }
  //Error 3, usando useEffect anidado(() => {
      utilizarEfecto(() => {})
  })
}

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

no se puede usar fuera de la función del componente.

//Error 1, useState se usa fuera de la función del componente
const [variable, establecerVariable] = useState(0);
//Error 2, useEffect se usa fuera de la función del componente
utilizarEfecto(() => {})
exportar la función predeterminada useState_Demo() {
   //Es correcto usarlo en la función del componente const [variable, setVariable] = useState(0);
}

3. Para evitar los errores anteriores, puede instalar el complemento ESLint eslint-plugin-react-hooks para verificar si hay errores en el código.

Ganchos personalizados

Un gancho es una función para facilitar el intercambio de lógica entre. componentes, que en realidad es reutilización. La función está encapsulada y el gancho personalizado también llama al gancho que viene con reaccionar. El nombre debe comenzar con use

// Gancho personalizado.
función useHook(estadoinit) {
  const [variable, establecerVariable] = useState(estadoinit)
  variable de retorno;
}
//Usar gancho personalizado
exportar la función predeterminada useState_Demo() {
    constante estadovariable = useHook(0)
}

Quizás se pregunte: ¿el uso del mismo gancho en varios componentes compartirá el estado?

La respuesta es: no. Debido a que cada llamada al gancho que viene con reaccionar es independiente y no se afecta entre sí, el gancho personalizado es independiente y no se afecta entre sí si se llama varias veces.