React - 기타 사용자 정의 Hooks

É possível criar seus próprios hooks, os Custom Hooks é uma forma de extrair logica de um componente em funções reutilizáveis.

Por convenção o nome dado a um custom hook se inicia com a palavra use.

Geralmente criamos um pasta hooks para organização do código.

O 커스텀 훅은 메스마regras dos hooks로 이어집니다. e dentro de um hook customizado usamos outros hooks e é isso que o torna tão poderoso, compartilhar lógica e manipular ciclos de vida de forma totalmente isolado com o hooks ja conhecidos torna o código mais legível.

Vamos는 사용자 지정 후크 가져오기의 예입니다.

...
const useFetch = (url) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        setError(false);

        const response = await fetch(url);
        const data = await response.json();

        setData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    })();
  }, [url]);

  return {
    loading,
    error,
    data,
  };
};

예제 없음 사용자 지정 후크는 URL을 가져오고 URL을 가져와서 끝점 인수를 가져오고 반환하고 개체를 가져오도록 합니다.

load para utilizamos um elemento de loading enquanto a resposta não chega.

오류 카소 존재 오류는 엔드포인트 e tratar isso na UI를 반환하지 않습니다.

UI에서 조작할 수 있는 데이터를 수정합니다.

Vamos agora ver a sua utilização.

import React from "react";

const CustomHookExample = () => {
  const { data, error, loading } = useFetch(
    "https://api.github.com/users/nascimento-dev-io"
  );

  if (loading) {
    return <div>loading...</div>;
  }

  if (error) {
    return <div>Erro ao buscar usuário</div>;
  }

  return <div> User: {data.name}</div>;
};

Aqui temos um componente usando o useFetch para consumir a API do github e retornar dados de um user, no componente tratamos então os casos de loading e erro assim como o retorno em tela do nome do usuário nesse caso.

Vamos então ao código complete.

import React, { useEffect, useState } from "react";

const CustomHookExample = () => {
  const { data, error, loading } = useFetch(
    "https://api.github.com/users/nascimento-dev-io"
  );

  if (loading) {
    return <div>loading...</div>;
  }

  if (error) {
    return <div>Erro ao buscar usuário</div>;
  }

  return <div> User: {data.name}</div>;
};


// Custom Hook
const useFetch = (url) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        setError(false);

        const response = await fetch(url);
        const data = await response.json();

        setData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    })();
  }, [url]);

  return {
    loading,
    error,
    data,
  };
};

Então percebemos que uma vez que você aprende a utilizar bem os hooks, eles concedem um poder muito grande no desenvolvimento em React, use sua imaginação para criar custom hooks conforme sua necessidade, nesse Site com Hooks Personalizados você encontra código de custom hooks para as mais variadas 최종.

감사합니다!

Documentação Oficial - Introdução aos Hooks | API de Referência dos Hooks | Custom 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 |