반응 - useEffect 대 useLayoutEffect

소개

Olá pessoal, hoje Darei início a uma pequena série de posts sobre React, tecnologia que eu trabalho atualmente. Vamos falar um pouco sobre hooks, hoje mais precisamente sobre os hooks useEffect (muito difundido e utilizado) e o useLayoutEffect (bem menos conhecido e utilizado).

기능

Olhando os hooks de maneira um pouco menos criteriosa temos a impressão de que ambos funcionam da mesma maneira, inclusive apresentam nomes e assinaturas bem semelhantes.

function MyComponent(){

  useEffect(()=>{
    //função de efeito
    soma()
  },[])//array de dependências


  useLayoutEffect(()=>{
     //função de efeito
     soma()
  },[])//array de dependências


  function soma(a,b){
    return a+b
  }
}

Para além das semelhanças de sintaxe, ambos possuem comportamento bem similar, e isso pode confundir o desenvolvedor desatento. Olhando rapidamente, o funcionamento dos dois é "exatamente o mesmo"! Executam uma uma função de efeito no primeiro render do componente, e tornam a executar essa função semper que alguma das dependsências do array de dependsências sofrer alteração.

무엇이 다른가요?

De maneira bem prática, existem duas diferenças entre os hooks, uma é o momento do lifecycle (Ciclo de vida do componente) em que eles são executados e a outra diferença é que um tem o funcionamento síncrono e o outro tem funcionamento assíncrono.

Para entender melhor é necessário uma breve explicação sobre o lifecycle. Semper que uma renderização acontece em um componente React, seja o primeiro render ou um render disparado por alterações nas props ou states, uma série de ações são executadas por baixo dos panos até que o usuário Visual as mudanças em tela, é isso que chamamos de 수명 주기는 구성 요소를 수행합니다. Isso posto vamos agora entender a diferença entre os dois hooks, ea principal delas é justamente o momento dentro desse lifecycle onde cada um dos hooks é disparado.

useEffect

No caso do useEffect a função de efeito é disparada após as alterações visuais do componente já terem sido aplicadas na tela, portanto já visíveis ao usuário.

useLayoutEffect

Já quando estamos tratando do useLayoutEffect esse comportamento se altera. A função de efeito será chamada semper antes de o usuário enxergar as alterações na tela.



Outra diferença do useLayoutEffect é que ele é síncrono, o que na prática indica que o próximo passo do lifecycle (usuário ver as alterações em tela) só acontece quando a função de efeito disparada for finalizada. Já no caso do useEffect isso não acontece pois seu comportamento é assíncrono.

활용도가 높습니까?

O próprio React recomenda a utilização do useEffect em 99% dos casos, pois o comportamento síncrono do useLayoutEffect que bloqueia o fluxo de renderização pode passar ao usuário a impressão de que a aplicação está "travada"quando na verdade a tela está esperando de função 렌더링을 종료하기 위해 집행자를 종료합니다. 항상 특정 시나리오가 존재하고 필요한 경우에는 알고리즘 프로세스가 최종적으로 필요한 경우에만 LayoutEffect를 사용해야 합니다.

피날리잔도

Por hoje é isso pessoal, nós próximos posts falaremos mais sobre o useEffect que teve seu comportamento alterado na versão 18 do React