React: Pergunta: useMemo em vez de useRef?

Criado em 3 fev. 2020 · 3Comentários · Fonte: facebook/react

Olá, só por curiosidade, useMemo ser usado em vez de useRef ao fazer o seguinte:

Exemplo:

const ref = useRef(null);
const ref2 = useMemo(() => { current: null }, []);

Parece-me que ambos os refs funcionarão muito bem como ref DOM e como valor mutável semelhante a campos de instância em classes. Por que então useRef é implementado de forma diferente em comparação com useMemo considerando o código ReactFiberHooks.js para useRef e useMemo ?

Obrigado!

Invalid Question

Fonte

svsool

Comentários muito úteis

Você poderia criar um objeto ref dessa maneira, mas seria menos eficiente, pois useMemo também rastreia e compara dependências. (Mesmo se você especificar uma matriz de dependência vazia, a estrutura de dados subjacente para um gancho de memo tem espaço para o valor extra.)

Para ilustrar isso, você pode comparar a implementação de useRef :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920

Para useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156

Como os dois ganchos são usados com frequência, é importante que tenham um desempenho ideal: sorria: então, são implementados de forma diferente.

bvaughn em 3 fev. 2020

👍7

Todos 3 comentários

Para useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156

Como os dois ganchos são usados com frequência, é importante que tenham um desempenho ideal: sorria: então, são implementados de forma diferente.

bvaughn em 3 fev. 2020

👍7

Você _poderia_ criar um objeto ref dessa maneira, mas seria menos eficiente, pois useMemo também rastreia e compara dependências. (Mesmo se você especificar uma matriz de dependência vazia, a estrutura de dados subjacente para um gancho de memo tem espaço para o valor extra.)
Para ilustrar isso, você pode comparar a implementação de useRef :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920
Para useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156
Como os dois ganchos são usados com frequência, é importante que tenham um desempenho ideal optimal para que sejam implementados de forma diferente.

oi, como formatar o código assim?