React é uma estrutura JavaScript de front-end. Embora construir páginas HTML e gerenciá-las possa se tornar tedioso, o React torna as coisas mais fáceis dividindo os elementos da tela e sua lógica em componentes.

O React traz muita coisa para a mesa, mas um dos recursos mais úteis é o gerenciamento de estado. Neste artigo, você aprenderá a gerenciar o estado usando React Hooks. Antes de prosseguir, este artigo presume que você conhece os fundamentos do React.

O que são ganchos no ReactJS?

O gancho é um novo conceito introduzido no React para gerenciar o estado e outros características do React. Usando ganchos no React, você pode evitar escrever códigos longos que, de outra forma, usariam classes. O exemplo a seguir demonstra um exemplo do useState gancho.

const [variável, setVariable] = useState (valor inicial);

Aqui o variável é o estado e o setVariable é a função que define o estado. useState é o gancho que contém o valor inicial da variável de estado. Não se preocupe se isso não fizer sentido para você. Ao final deste tutorial, você terá uma sólida compreensão dos ganchos.

Existem dois tipos de ganchos:

• Ganchos Básicos
  1. useState
  2. useEffect
  3. useContext
• Ganchos Adicionais
  1. useRef
  2. useMemo
  3. useReducer

useState ()

o useState gancho ajuda a gerenciar o estado. Anteriormente, no desenvolvimento do React, o gerenciamento de estado era feito usando classes. A sintaxe de estado foi escrita dentro do construtor e usou o isto palavra-chave. Com a introdução dos ganchos React, os desenvolvedores têm a liberdade de gerenciar o estado usando componentes funcionais.

Você pode consultar o exemplo anterior para obter a sintaxe dos ganchos React. O exemplo mais simples de explicar useState () é o exemplo da variável de contagem:

import {useState} de "react";
function App () {
const [contagem, setCount] = useState (0);
Retorna (


Exemplo de ganchos

{contar}

setCount (count + 1)}> Adicionar
setCount (count-1)}> Subtrair



);
}

o useState hook tem uma variável e método que é usado para definir o valor da variável. o useState O gancho aceita o valor inicial do estado como parâmetro. Você pode definir qualquer valor para a variável de contagem usando o setCount método.

Existem dois botões no código acima para aumentar e diminuir o valor do contar variável. Durante o incremento, você pode adicionar +1 ao estado de contagem atual e -1 para diminuir a contagem em 1.

useEffect

o useEffect hook atualiza o estado na página da web após cada mudança de estado. o useEffect O gancho foi introduzido para remover os efeitos colaterais dos componentes baseados em classe. Antes da introdução de componentes baseados em função, as mudanças no estado eram rastreadas usando os componentes do ciclo de vida: componentDidMount e componentDidUpdate. o useEffect gancho aceita uma matriz de dependência. Todas as mudanças nas variáveis ​​de estado mencionadas na matriz de dependência são rastreadas e exibidas usando o useEffect gancho.

Um exemplo clássico de como usar o useEffect gancho é buscar dados de uma API ou calculando curtidas ou assinaturas em uma postagem.

useEffect (() => {
// código
}, [matriz de dependência]);

Considerando o exemplo acima

import {useState, useEffect} de "react";
function App () {
const [contagem, setCount] = useState (0);
useEffect (() => {
document.title = `Você clicou por $ {count} vezes`;
}, [contar]);
Retorna (


Exemplo de ganchos

{contar}

 setCount (count + 1)}> Adicionar



);
}

Ao passar o contar variável de estado no useEffect matriz de dependência, ele verifica se o estado mudou ou não. Em seguida, define o título do documento para a variável de contagem.

useContext

o useContext O gancho ajuda a passar os dados pelo componente sem fazer isso manualmente por meio de adereços. Isso torna o uso da API de contexto rápido e fácil. Você terá um melhor entendimento depois de examinar um exemplo.

Primeiro, entenda a aparência do código sem usar Context. Como você pode ver, você deve passar o texto por meio de adereços para o componente filho. Para evitar complexidades, você pode usar o useContext gancho.

função padrão de exportação App () {
let text = "Olá, bem-vindo ao MUO";
Retorna (






);
}
const ChildComponent = ({text}) => {
Retorna 
{texto}
;
};

Em primeiro lugar, crie um Provedor em seu arquivo principal (App.js).

Const Context = React.createContext (null);

o Aplicativo componente é o componente de nível superior ou componente "pai". Você precisa envolver todo o componente no e passe o objeto ou dados que você deseja renderizar no componente filho.

função padrão de exportação App () {
let text = "Olá, bem-vindo ao MUO";
Retorna (








);
}

Agora, crie um componente filho e acesse o suporte de texto usando o useContext gancho. Passe o Contexto variável usando createContext.

const ChildComponent = () => {
deixe text = useContext (Contexto);
console.log (texto);
Retorna 
{texto}
;
};

Relacionado: Frameworks JavaScript que valem a pena aprender​​​​​

Muito mais para explorar com o React

Você acabou de aprender o básico sobre ganchos. É um dos melhores recursos do React e também é bastante amigável ao desenvolvedor. React é uma das melhores estruturas de front-end para aprender hoje para oportunidades de trabalho, criação de aplicativos de uma única página ou simplesmente para ampliar seu conhecimento de programação.

Por falar em ampliar seu conhecimento, gerenciar o estado é apenas uma habilidade que os desenvolvedores do React precisam praticar. Outros recursos importantes, como adereços, merecem a mesma atenção.

Como usar acessórios no ReactJS

Se você está procurando dicas sobre como usar os adereços no ReactJS, você está no lugar certo.

Leia a seguir

Sobre o autor