
Como começar rapidamente com VUE3.0: Enter Learning
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.
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.
usar Hooks Existem duas razões principais para usar Hooks:
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.
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.
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.
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:
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.
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.
useRef retorna um objeto ref, que persiste durante todo o ciclo de vida do componente.
Ele tem dois usos:
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.
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.
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.
Através de ganchos personalizados, a lógica do componente pode ser extraída em funções reutilizáveis.
Hooks personalizados são funções que possuem duas características que as distinguem das funções comuns:
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.
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:
Você pode acessar o site oficial do react-use para aprender como usá-lo.
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 ~