"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Gancho useEffect explicado

Gancho useEffect explicado

Publicado em 2024-11-08
Navegar:355

useEffect Hook Explained

O gancho useEffect é uma parte fundamental do React, permitindo que você execute efeitos colaterais em componentes funcionais. Aqui está uma análise detalhada:

O que é useEffect?

  • O gancho useEffect permite executar efeitos colaterais em seus componentes, como busca de dados, assinaturas ou alteração manual do DOM.
  • Pode ser considerado uma combinação dos métodos de ciclo de vida componentDidMount, componentDidUpdate e componentWillUnmount.

Sintaxe

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

Parâmetros

  1. Função de efeito: O primeiro argumento é uma função que contém o código do efeito colateral. Esta função será executada depois que a renderização for enviada à tela.

  2. Função de limpeza (opcional): A função de efeito pode retornar uma função de limpeza que o React chamará quando o componente for desmontado ou antes que o efeito seja executado novamente. Isso é útil para limpar assinaturas ou cronômetros.

  3. Matriz de dependências: O segundo argumento é uma matriz de dependências. O efeito é executado somente quando uma das dependências é alterada. Se você passar um array vazio ([]), o efeito será executado apenas uma vez após a renderização inicial (como componentDidMount).

Exemplos de uso

  1. Exemplo básico: Buscando dados na montagem
import React, { useEffect, useState } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
; };
  1. Exemplo de limpeza: inscrição em um evento
import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
; };
  1. Exemplo de dependência: Executando um efeito com base em uma alteração de prop
import React, { useEffect, useState } from 'react';

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
; };

Melhores Práticas

  • Especificar dependências: sempre inclua as variáveis ​​das quais seu efeito depende na matriz de dependências para evitar fechamentos obsoletos.
  • Evite efeitos colaterais na renderização: Mantenha os efeitos colaterais fora da fase de renderização; use useEffect em vez disso.
  • Usar funções de limpeza: Se o seu efeito criar assinaturas ou temporizadores, sempre retorne uma função de limpeza para evitar vazamentos de memória.

Conclusão

O gancho useEffect é uma ferramenta poderosa para lidar com efeitos colaterais em componentes funcionais, tornando-o essencial para o desenvolvimento moderno do React. Ao compreender sua sintaxe e práticas recomendadas, você pode gerenciar com eficácia o comportamento e os efeitos colaterais dos componentes.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/imyusufakhtar/useeffect-hook-explained-263k?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3