React - 아주 좋은 후크 | 파트 01

Hooks é a uma API React que tornou possível a criação de componentes function, Antes apenas class podiam armazenar estados. React disponibiliza uma API com funções que podemos usar para criar estados, gerenciar ciclo de vida do componentes e outras finalidades, veremos de forma básica característica e uso dos principais hooks utilizados no dia a dia.

Regras 도스 후크

Apenas chame Hooks no nível mais alto.

Não chame Hooks dentro de loops, condições ou funções aninhadas.

Apenas chame Hooks de componentes funcionais.

Hooks는 자바스크립트와 클래스를 연결합니다.

Documentação Oficial: Regras dos Hooks

OS 후크 활용

Os hooks são semper importando do do no inicio do seu código com a seguinte sintaxe.

import { useState, useEffect, useContext, useReducer, useCallback } from 'react';

useState

O useState é o hook mais comum e utilizado gerenciar estado em componentes funcionais.
O useState recebe um parâmetro ( ou função ) que defini o valor inicial do estado, o seu retorno é um array onde a primeira posição é o estado e o segundo é uma função que é usada para atualizar o estado, por convenção utilizamos o prefixo set seguido do nome do estado para nomear essa função.

useState의 활용 예:

// 1 - importa o hook.
import React, { useState } from 'react'

const Counter = () => {
 //  2 - Usa destructuring para pega os retorno do hook e setando 0 como valor inicial.
  const [counter, setCounter] = useState(0);

  // 3 - Uso do estado para renderizar o número na UI.
 // 4 - Utilizando o evento onClick chamando a função setCounter 
  para incrementar o contador ( state ).
  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={setCounter(counter + 1)}>Incrementar</button>
   </>
  )
} 

A função de atualização do estado pode receber uma função como argumento e essa função tem acesso ao valor do estado anterior para realizar alguma atualização baseado nele.

예:

setState((prevState) => !prevState);

!Importante - setState pode ser assíncrona pois ela agenda uma re-renderização.

É possível usar mais de um estado no componente, para isso apenas repita a chamada do useState atribuindo nomes as variáveis ​​e funções de forma coerentes com suas atribuições, pois isso ajuda na legibilidade e manutenção do código.

이 반응은 UI의 중요한 요소 중 하나에 대한 렌더링을 의미하며, 후단에 있는 것을 제거하는 데 사용할 수 있습니다.

Documentação Oficial: Usando o State do Hook

useEffect

O useEffect é o hook utilizado no lifecycle do componente, ele não possui retorno e é usado para realizar "efeito colaterais"geralmente baseado em atualização de estado/props.

Em sua chamada são necessário 2 paraâmetros, um função de efeito, e uma array de dependsências, semper que uma ou mais dessas dependsências é alterada a função de efeito é executada novamente.

사용 여부:

...
const UserInfo = (props) => {

  useEffect(() => {
    console.log(`ID do usuário alterado para ${props.userID}`)
  },[props.userID])

}

Em toda mudança no userID o useEffect é executado novamente, no caso de chamada async é necessário criar uma nova função interna executando-a na sequência ou usando IIFE.

...
const UserInfo = (props) => {

  useEffect(() => {
    async function loadUserData(){
      await services.getUserByID(props.userID);
    }

    loadUserData()
  }, [props.userID])

  useEffect(() => {
    console.log(`ID do usuário alterado para ${props.userID}`)
  },[props.userID])
}

Caso queira chamar o useEffect apenas uma vez no mount do componente deixe o array de dependências vazio.

Se não declara o array, o hook será executado em toda nova renderização do componente.

Os exemplos anteriores cobrem os casos de montagem e atualização do componente, existe também a fase de desmontagem, o useEffect pode ser utilizado nessa fase também e um caso comum é remover eventListeners.

...
const App = () => {

  function handleScroll(event){
    console.log("Window Scroll...", event)
  }

  useEffect(() => {
    // cria o eventListener assim que o componente é montado.
    document.addEventListener("scroll", handleScroll);

    // remove o eventListener quando componente é desmontado.
    return () => removeEventListener("scroll", handleScroll);
  })
}

예를 들어 구성 요소를 마운트 해제하거나 제거하는 경우, React에서 '림페자'를 정확하게 표시하는 기능, 제거하는 경우 또는 eventListener 또는 메모리 누수가 발생하는 경우가 없습니다. 세이버 라이더는 의존성 및 작동성 구성 요소를 포함하여 버그를 제거하고 응용 프로그램을 사용할 수 있습니다.

그렇지 않은 경우 useReducer, useCallback, useMemo 및 useRef에서 후크를 사용할 수 없습니다.

Documentação Oficial: Usando Effect Hook

Documentação Oficial - Introdução aos Hooks | API de Referência dos Hooks

Veja também: |

_{Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.}

나 시감 :)

| github