Ganchos de reação

Hooks foram adicionados ao React na versão 16.8.

Hooks permitem que componentes de função tenham acesso ao estado e outros recursos do React. Por causa disso, os componentes de classe geralmente não são mais necessários.

Embora Hooks geralmente substituam componentes de classe, não há planos para remover classes do React.

O que é um Gancho?

Hooks nos permitem "ligar" em recursos do React, como métodos de estado e ciclo de vida.

Exemplo:

Aqui está um exemplo de um Hook. Não se preocupe se não fizer sentido. Entraremos em mais detalhes na próxima seção .

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Você deve importGanchos de react.

Aqui estamos usando o useStateHook para acompanhar o estado do aplicativo.

O estado geralmente se refere aos dados ou propriedades do aplicativo que precisam ser rastreados.

Regras do Gancho

Existem 3 regras para ganchos:

Hooks só podem ser chamados dentro dos componentes da função React.
Hooks só podem ser chamados no nível superior de um componente.
Ganchos não podem ser condicionais

Nota: Hooks não funcionarão em componentes da classe React.

Ganchos personalizados

Se você tiver uma lógica com estado que precisa ser reutilizada em vários componentes, poderá construir seus próprios Hooks customizados.

Entraremos em mais detalhes na seção Custom Hooks .

❮ Anterior Próximo ❯

Reagir Tutorial