O que é um gancho? Vamos falar sobre dois ganchos comumente usados ​​no React

Como começar rapidamente com o VUE3.0: Antes de começar a aprender,

vamos primeiro apresentar o que é um gancho.

Hook é um novo recurso do React 16.8. Ele é usado especialmente em componentes funcionais. Ele pode substituir outros recursos de reação em componentes de classe. e é comumente usado no trabalho real.

Por que é recomendado o uso de ganchos para desenvolvimento?

Os ganchos são especialmente usados ​​para cooperar com o desenvolvimento de componentes funcionais. Eles podem ser usados ​​para substituir alguns dos ciclos de vida dos componentes da classe para evitar confusão causada por um grande número disso. ganchos são convenientes para o desenvolvimento e mais fáceis para os desenvolvedores entenderem o código.

O acima é um breve resumo pessoal. Para mais motivos, consulte o site oficial do react:

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

useState

No código:

React.useState(0) é equivalente a this no componente de classe. Adicionar uma variável de valor de atributo

ao

estado é equivalente a this.state no componente de classe.

para modificar o valor da variável, que pode ser equivalente a this.setState no componente de classe

import React, (useState) from 'react'.
função padrão de exportação useState_Demo() {
    const [variable, setVariable] = useState(0); //Através da atribuição de desestruturação, obtemos a variável e setVariable
    função alterarVariável(){
        setVariable((variable) => variable +1) //O parâmetro passado no callback de setVariable é variável
    }
    renderizar (
        <div> 
            <button onclick = {change}>Clique em mim para criar variável+1</button>
        </div>
    )
}

useEffect

:

Como pode ser visto no código a seguir, o uso de useEffect substitui o uso de componentDidMoun, componentDidUpdate e componentWillUnmount no componente de classe

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

função padrão de exportação useState_Demo() {
   const [variable, setVariable] = useState(0); //Através da atribuição de desestruturação, obtemos a variável e setVariable
    
    useEffect(() => {
        //Este retorno é chamado quando os dados monitorados pelo componente são alterados ou quando ele é desinstalado. Ao ser desinstalado, chamá-lo pode ser equivalente ao gancho componentWillUnmount return () => {.
            console.log('O componente foi desinstalado')
        }
    }, [variável])//O segundo parâmetro é passado [variável], o que significa que a alteração de atualização da variável é detectada. Assim que a variável for alterada, o retorno de chamada useEffect será executado novamente //O segundo parâmetro é passado [] , o que significa que ninguém A detecção executa o retorno de chamada useEffect apenas uma vez, o que equivale ao gancho componentDidMount //O segundo parâmetro não passa parâmetros Enquanto o componente tiver uma mudança de estado, o retorno de chamada useEffect será executado, o que será executado. é equivalente à função de gancho componentDidUpdate changeVariable(){
        setVariable((variable) => variable +1) //O parâmetro passado no callback de setVariable é variável
    }
    renderizar (
        <div> 
            <button onclick = {change}>Clique em mim para criar variável+1</button>
        </div>
    )
}

Coisas a serem observadas ao usar ganchos

: 1. Use Hooks apenas na camada mais externa das funções do componente. Não chame Hooks em loops, condições ou funções aninhadas

import React, (useEffect) de 'react'.
função padrão de exportação useState_Demo() {
   //Este é o useEffect(() => {}) correto
    
   //Erro 1, usando julgamento condicional if(true) {
        useEffect(() => {})
   }
   //Erro 2, usando loop while(true) {
        useEffect(() => {})
   }
  //Erro 3, usando useEffect aninhado(() => {
      useEffect(() => {})
  })
}

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

não pode ser usado fora da função do componente.

//Erro 1, useState é usado fora da função do componente
const [variável, setVariable] = useState(0);
//Erro 2, useEffect é usado fora da função do componente
useEffect(() => {})
função padrão de exportação useState_Demo() {
   //É correto utilizá-lo no componente function const [variable, setVariable] = useState(0);
}

3. Para evitar os erros acima, você pode instalar o plug-in ESLint eslint-plugin-react-hooks para verificar se há erros no código.

Ganchos personalizados

Um gancho é uma função para facilitar o compartilhamento de lógica entre. componentes, que na verdade são reutilizados. A função é encapsulada e o gancho personalizado também chama o gancho que vem com o react. O nome deve começar com use

// Gancho personalizado.
função useHook(initState) {
  const [variável, setVariable] = useState(initState)
  variável de retorno;
}
//Use gancho personalizado
função padrão de exportação useState_Demo() {
    const variávelState = useHook(0)
}

Você pode estar se perguntando: usar o mesmo Hook em vários componentes compartilhará o estado?

A resposta é: não. Como cada chamada ao gancho que vem com o react é independente e não afeta uma à outra, o gancho personalizado é independente e não afeta um ao outro se for chamado várias vezes.