Este artigo lhe dará uma compreensão aprofundada dos React Hooks!

Como começar rapidamente com VUE3.0: Enter Learning

Preface

Hooks são usados ​​para usar estado e outros recursos do React sem escrever classes. Então, o que exatamente são Hooks, por que devemos usar Hooks, quais Hooks comuns o React fornece e como personalizar os Hooks. A seguir, você os revelará um por um.

O que são ganchos?

Ganchos são traduzidos como ganchos. Ganchos são funções dentro de componentes de função responsáveis ​​por conectar-se a funções externas.

O React fornece alguns ganchos comuns, e o React também oferece suporte a ganchos personalizados. Esses ganchos são usados ​​para introduzir funções externas às funções.

Quando precisamos introduzir funções externas em um componente, podemos usar os ganchos fornecidos pelo React ou personalizar os ganchos.

Por exemplo, se você introduzir a função de gerenciamento de estado em um componente, poderá usar a função useState. O uso de useState será apresentado em detalhes a seguir.

Por que

usar Hooks Existem duas razões principais para usar Hooks:

• para simplificar a reutilização de lógica
• para facilitar a compreensão de componentes complexos;

1. Simplifique a reutilização lógica

Antes do surgimento dos Hooks, o React precisava emprestar padrões de design complexos, como componentes de alta ordem e renderizar adereços, para obter a reutilização lógica.

Os ganchos nos permitem reutilizar a lógica do estado sem modificar a estrutura do componente. O uso de ganchos personalizados será apresentado em detalhes a seguir.

2. Tornar componentes complexos mais fáceis de entender

Em componentes de classe, o código para a mesma lógica de negócios é espalhado em diferentes funções do ciclo de vida do componente, e os Hooks podem agregar o código para a mesma lógica de negócios, permitindo que a lógica de negócios seja. claramente separados, tornando o código mais fácil de entender e manter.

4. Hooks comumente usados

​​1. useState

useState é um Hook que permite adicionar estado em componentes de função React.

Os exemplos de uso são os seguintes:

import React, { useState } from 'react';

função Exemplo() {
  // Declara uma variável de estado chamada "count" const [count, setCount] = useState(0);
  // ...

O código acima declara uma variável de estado count com um valor inicial de 0 e atualiza a contagem atual chamando setCount.

2. useEffect

useEffect permite executar operações de efeitos colaterais em componentes de função.

Os efeitos colaterais referem-se a um trecho de código que não tem nada a ver com os resultados da execução atual. As operações de efeitos colaterais comuns incluem aquisição de dados, configuração de assinaturas e alteração manual do DOM nos componentes React.

useEffect pode receber dois parâmetros, o código é o seguinte:

useEffect(callback, dependencies)

O primeiro parâmetro é o retorno de chamada da função a ser executada, e o segundo parâmetro são as dependências opcionais do array de dependências.

A dependência é opcional. Se não for especificada, o retorno de chamada será executado toda vez que o componente da função for executado; se for especificado, só será executado quando o valor na dependência for alterado;

Os exemplos de uso são os seguintes:

function Exemplo() {
  const [contagem, setCount] = useState(0);

  // Semelhante a componentDidMount e componentDidUpdate:
  useEffect(() => {
    //Atualiza o título do documento usando a API do navegador
    document.title = `Você clicou ${count} vezes`;

    retornar() => {
        // Pode ser usado para limpeza, equivalente a componentWillUnmount da classe componente
    }

  }, [count]); // Especifique a dependência como contagem e execute o efeito colateral quando a contagem for atualizada // ...

O código acima usa useEffect para implementar a função de efeito colateral quando a contagem de dependência for atualizada e limpá-la. retornando a função de retorno de chamada O último resultado da execução.

Além disso, useEffect fornece quatro tempos para execução de efeitos colaterais:

• executado após cada renderização : o segundo parâmetro de dependência não é fornecido. Por exemplo, useEffect(() => {});
• executado somente após a primeira renderização : fornece um array vazio como dependência. Por exemplo, useEffect(() => {}, []);
• executado pela primeira vez e após a alteração das dependências : fornece uma matriz de dependências. Por exemplo, useEffect(() => {}, [deps]);
• executado após o componente ser desmontado : retorna uma função de retorno de chamada. Por exemplo useEffect() => { return () => {} }, []).

3. useCallback

A função de retorno de chamada definida por useCallback só irá redeclarar a função de retorno de chamada quando as dependências mudarem, garantindo assim que o componente não criará funções de retorno de chamada duplicadas . O componente que recebe esta função de retorno de chamada como um atributo não precisará ser renderizado novamente com frequência .

Os exemplos de uso são os seguintes:

const memoizedCallback = useCallback(() => {
  faça alguma coisa (a, b)
}, [a, b])

O código acima irá redeclarar a função de retorno de chamada somente quando as dependências a e b forem alteradas.

4. useMemo

A função de criação definida por useMemo só será recalculada quando uma determinada dependência for alterada, o que auxilia em cálculos de alto overhead que não serão repetidos toda vez que for renderizado, e o componente que recebe esse valor calculado como propriedade não será É necessária uma nova renderização frequente .

Os exemplos de uso são os seguintes:

const memoizedValue = useMemo(() => computaExpensiveValue(a, b), [a, b])

O código acima só será recalculado quando as dependências a e b forem alteradas.

5. useRef

useRef retorna um objeto ref, que persiste durante todo o ciclo de vida do componente.

Ele tem dois usos:

• salvar referências a nós DOM ,
• compartilhando dados entre múltiplas renderizações ;

Um exemplo de como salvar um nó DOM é o seguinte:

function TextInputWithFocusButton() {
  const inputEl = useRef(nulo)
  const onButtonClick = () => {
    // `current` aponta para o elemento de entrada de texto inputEl.current.focus() que foi montado no DOM
  }
  retornar (
    <>
      <input ref={inputEl} type='texto' />
      <button onClick={onButtonClick}>Focar a entrada</button>
    </>
  )
}

O código acima cria um objeto ref por meio de useRef, salva a referência do nó DOM e pode executar operações DOM em ref.current.

Um exemplo de compartilhamento de dados entre múltiplas renderizações é o seguinte:

import React, { useState, useCallback, useRef } from 'react'

função padrão de exportação Timer() {
  //Defina o estado de tempo para salvar o tempo acumulado de cronometragem const [time, setTime] = useState(0)

  // Define o temporizador. Esse contêiner é usado para salvar uma variável entre renderizações de componentes cruzados const timer = useRef(null)

  // Função manipuladora de eventos para iniciar o tempo const handleStart = useCallback(() => {
    // Use o atributo atual para definir o valor de ref timer.current = window.setInterval(() => {
      setTime((hora) => hora + 1)
    }, 100)
  }, [])

  //Pausa a função de tratamento de eventos de temporização const handlePause = useCallback(() => {
    // Use clearInterval para parar o tempo window.clearInterval(timer.current)
    temporizador.atual = nulo
  }, [])

  retornar (
    <div>
      {tempo/10} segundos.
      <br />
      <button onClick={handleStart}>Iniciar</button>
      <button onClick={handlePause}>Pausar</button>
    </div>
  )
}

O código acima cria um objeto ref com um nome de variável timer por meio de useRef. Este objeto pode ser chamado ao renderizar entre componentes, criar um novo cronômetro ao iniciar a cronometragem e limpar o cronômetro quando a cronometragem for pausada.

6. useContext

useContext é usado para receber um objeto de contexto e retornar o valor do contexto, o que pode alcançar o compartilhamento de dados entre níveis.

Um exemplo é o seguinte:

//Crie um objeto de contexto const MyContext = React.createContext(initialValue)
função Aplicativo() {
  retornar (
    // Passa o valor do contexto através de Context.Provider <MyContext.Provider value='1'>
      <Contêiner />
    </MyContext.Provider>
  )
}

função Contêiner() {
  retornar <Teste />
}

função Teste() {
  // Obtém o valor do Context const theme = useContext(MyContext) // 1
  retornar <div></div>
}

O código acima obtém o Contexto definido no componente App através de useContext, conseguindo o compartilhamento de dados entre componentes hierárquicos.

7. useReducer

useReducer é usado para apresentar a função Redutor.

Um exemplo é o seguinte:

const [estado, despacho] = useReducer(reducer, inicialState)

Aceita a função Redutor e o valor inicial do estado como parâmetros e retorna um array. O primeiro membro da matriz é o valor atual do estado e o segundo membro é a função de despacho que envia a ação.

5. Ganchos personalizados

Através de ganchos personalizados, a lógica do componente pode ser extraída em funções reutilizáveis.

1. Como criar Ganchos personalizados?

Hooks personalizados são funções que possuem duas características que as distinguem das funções comuns:

• o nome começa com "use"
• a função chama outros Hooks internamente;

Um exemplo é o seguinte:

import { useState, useCallback } from 'react'

function useContador() {
  // Define a contagem, este estado é usado para salvar o valor atual const [count, setCount] = useState(0)
  // Implemente a operação de adição de 1 const increment = useCallback(() => setCount(count + 1), [count])
  // Implementa a operação de decremento em 1 const decrement = useCallback(() => setCount(count - 1), [count])
  //Redefinir contador const reset = useCallback(() => setCount(0), [])

  // Exporta as operações de lógica de negócios para o chamador usar return {count, increment, decrement, reset }
}

//componente 1
function MeuComponent1() {
  const {contagem, incremento, decremento, redefinição} = useCounter()
}

//componente 2
function MeuComponent2() {
  const {contagem, incremento, decremento, redefinição} = useCounter()
}

O código acima reutiliza facilmente a lógica de negócios entre o componente MyComponent1 e o componente MyComponent2 personalizando Hooks useCounter.

2. Biblioteca de Hooks personalizados - react-use

O React fornece oficialmente a biblioteca react-use, que encapsula um grande número de Hooks personalizados que podem ser usados ​​diretamente, ajudando-nos a simplificar a lógica interna dos componentes e melhorar a legibilidade e manutenção do código.

Entre eles, nossos ganchos personalizados comumente usados ​​são:

• useLocation e useSearchParam: rastreie o status da posição da barra de navegação da página
• useScroll
• : rastreie a posição de rolagem do elemento HTML
• useScrolling: rastreie se o elemento HTML está rolando;
• useAsyncRetry: analisa uma função assíncrona;
• useTitle: define o título da página.

Você pode acessar o site oficial do react-use para aprender como usá-lo.

6. Resumo

Este artigo apresenta os React Hooks a partir de quatro aspectos: o que são Hooks, por que usá-los, o que os Hooks comuns que o React oferece e como personalizar os Hooks. Acredito que todos tenham uma compreensão mais profunda dos React Hooks.

Espero que ajude você, obrigado pela leitura ~