Compartilhamento de tecnologia

useCallback em React

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introdução

No desenvolvimento de aplicativos React, a otimização do desempenho dos componentes é um processo contínuo.useCallbackÉ um React Hook usado para memorizar funções de retorno de chamada para garantir que essas funções permaneçam consistentes durante todo o ciclo de vida do componente, evitando assim problemas desnecessários de renderização e desempenho.

Histórico do problema

No React, se os adereços ou o estado de um componente mudarem, o componente será renderizado novamente. Se um componente filho depende dos adereços de um componente pai, e esses adereços são funções, uma nova instância de função será criada toda vez que o componente pai for renderizado, o que pode fazer com que os componentes filhos também sejam renderizados novamente, mesmo que seus adereços não tenham essencialmente mudou.

useCallbackpapel

useCallback Usado para resolver os problemas acima. Ele memoriza funções de retorno de chamada para garantir que a função permaneça inalterada durante toda a vida útil do componente, a menos que suas dependências mudem.

useCallbackdescrição do parâmetro

useCallbackAceita dois parâmetros:

  1. Ligar de volta: A função que você deseja memorizar.
  2. matriz de dependências : uma matriz contendo valores de dependências funcionais. A função de retorno de chamada só é recriada quando uma dessas dependências é alterada.

A sintaxe básica é a seguinte:

const memoizedCallback = useCallback(
  () =