Esse artigo é uma tradução do artigo original useEffect vs useLayoutEffect criado por Kent C. Dodds .

Ambas opções podem ser usadas para fazer a mesma coisa, mas elas tem casos de uso ligeiramente diferentes. Então, aqui estão algumas regras para você thinkar ao decidir qual React Hook usar.

사용 효과

99% das vezes é esse que você precisará usar. Quando seus hooks são estáveis ​​e você refatora as suas class components para hooks, aos poucos você irá mudar códigos de componentDidMount , componentDidUpdate e componentWillUnmount para. 1415

실행 가능한 문제에 대한 응답은 기본 구성 요소에 대한 응답 렌더링, 구성 요소에 대한 설계 및 렌더링 작업을 수행하는 데 사용됩니다. Isso é diferente do comportamento de class components onde useEffect e componentDidMount 렌더링 이미지에 대한 로드 형식. É mais eficiente dessa maneira e na maioria das vezes é isso que você precisará.

Entretanto, se o uso desse hook estiver mudando o DOM(via DOM node ref) e a mutação do DOM alterar aparência do nó do DOM entre o momento que ele é renderizado e o momento que seu hook o altera, então de vocseja0 4507 então de vocseja0 não . Você na verdade quer usar o componentDidUpdate . Caso contrário, o usuário poderá ver uma mudança rápida na interface quando suas mudanças do DOM forem realizadas. Essa é praticamente a única vez que você deseja evitar useEffect e usar useLayoutEffect em vez disso.

레이아웃 효과 사용

즉시 실행 가능한 형식은 DOM이 아닌 변경 사항으로 반응합니다. Pode ser útil se você precisar fazer medições DOM (como obter a posição de rolagem ou outros estilos para um elemento) e depois fazer alterações no DOM ou acionar uma nova renderização síncrona atualizando.

No que diz respeito ao momento, ele funciona da mesma forma que useEffect e useLayoutEffect . Seu código é executado immediamente após o DOM ser atualizado, mas antes que o navegador tenha a chance de "renderizar"essas alterações (o usuário não vê as atualizações até que tenhaadore.navegador)

이력서

componentDidMount : Se você precisar alterar o DOM e/ou precisar realizar medições.

componentDidUpdate : Se você não precisa interagir com o DOM ou suas alterações no DOM não são observáveis ​​(sério, na maioria das vezes você. deve usar isso)

음 카소 디퍼렌테

Um caso onde você possa querer usar useLayoutEffect ao invés de useEffect é quando você está atualizando um valor (como useLayoutEffect ) e vocest tesá quereriza 와 함께 예:

const ref = React.useRef()
React.useEffect(() => {
  ref.current = 'valor qualquer'
})

// depois, em outro hook ou algo do tipo
React.useLayoutEffect(() => {
  console.log(ref.current) // <-- isso aqui loga o valor antigo pois é executado primeiro!
})

Em casos como esse, 사용 useEffect .

결론

É tudo sobre padrões. O comportamento padrão é permitir que o navegador renderize novamente com base nas atualizações do DOM antes que o React execute seu codigo. isso significa que seu codigo não bloqueará o navegador e o usuário verá as atualizações do DOM mais cedo. Portanto, fique com ref na maioria das vezes.