Noções básicas de React Hooks, useState Hooks

Em esta história nós estamos indo para cobrir todas as noções básicas sobre reagem ganchos e aprender sobre a built-in reagir gancho chamado useState ().

Pré-requisito -

Você deve saber noções básicas de HTML, Javascript, o que é React e como funciona .

E se você cumprir esses pré-requisitos, está pronto para prosseguir .

O que é React Hooks?

• Os Ganchos React foram introduzidos no React 16.8 .
• Os ganchos do React são basicamente funções que permitem lidar com o estado do aplicativo da web e trabalhar facilmente com outros recursos do React, como componenDidMount () , componenDidUpdate () sem escrever classe .
• Você pode usar ganchos React apenas em componentes funcionais , não em componentes definidos por classe.
• Em palavras simples, podemos definir os ganchos de reação como funções que permitem que você "conecte-se" ao estado do React e aos recursos de ciclo de vida dos componentes funcionais .
• Existem muitos tipos de ganchos React integrados -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

O que é useState?

• useState é um dos ganchos React mais comuns e mais usados.
• useState é usado como ganchos de gerenciamento de estado de um componente específico.
• O gancho useState é usado para controlar o estado de nossos componentes.
• useState nos permite criar e manipular variáveis ​​de estado de maneira fácil e conveniente.
• Em useState, definimos o estado inicial da variável de estado e usamos a função definida por useState para alterar o estado dessa variável de estado do estado inicial para o estado atual .
• Só podemos usar useState em componentes funcionais, não em componentes baseados em classe .
• useState é o mesmo que this.statee this.setStateem componentes baseados em classe React .
• Não se preocupe, se você não entender o estado e usar o Estado corretamente, isso ficará completamente claro em sua cabeça, uma vez que você o compreenderá pelo exemplo de código.

Nesta seção, criarei um contador simples usando o gancho useState para que você possa entender facilmente como o useState funciona e quando usá-lo.

• Código -
• Explicação do código -
• Na linha deste código, importamos o useStategancho ‘react’.
• Depois disso, iremos criar um componente funcional chamado Appno arquivo App.js.
• Nesse componente funcional, criaremos a variável de estado chamada count e a função useState chamada setCount.
• Na 6ª linha deste código, estamos usando o gancho useState, no qual tornamos a variável de estado chamada count e, para alterar o estado dessa contagem, criamos uma função chamada setCount.
• Aqui em useState(0)0 estado inicial indicado de count estado varibale. Portanto, a princípio, quando nosso componente App carrega, o valor da count variável de estado será 0. E usando setCounto método, seremos capazes de alterar o valor da count variável de estado.
• Agora criamos um método chamado decreamentque diminuirá o count valor da variável de estado em 1 sempre que clicarmos no botão (decrementar -) . Basicamente, o que esse método faz é definir o estado da countvariável para o método count-1using setCount.
• Agora criamos um método chamado increamentque aumentará o count valor da variável de estado em 1 sempre que clicarmos no botão (incrementar +) . Basicamente, o que esse método faz é definir o estado da countvariável para o método count+1using setCount.
• Na return seção deste código é autoexplicativo e no botão ( incremento +) passamos o increament método no onClick evento e no botão (decremento-) passamos o decreamentmétodo.

Conclusão

Portanto, aqui neste artigo, cobrimos os fundamentos dos ganchos React e o que é o gancho useState, como funciona e como implementá-lo .

Espero que vocês tenham gostado de ler e aprender.

Se você gostou deste artigo, fique à vontade para deixar um aplauso e compartilhar com outras pessoas para que também possam aprender com ele.