Início / coding / Perguntas / 79592371
Accepted
Daniel
Asked: 2025-04-25 19:00:15 +0800 CST

Compilador React 19 e funções inline em jsx

  • 772

Atualmente, estou atualizando meu código-base para o React 19 e usando o compilador. Tradicionalmente, as funções de seta inline no React no JSX eram consideradas práticas ruins por questões de desempenho. No entanto, estou tentando encontrar confirmação se o compilador do React lidará com esse caso de uso agora e se posso usar funções inline com segurança.

por exemplo, anteriormente eu poderia ter feito algo assim:

const testFunction = useCallback(() => {
    doSomething(id)
  }, [id])

  <Button onClick={testFunction} />

mas isso pode agora ser simplificado para:

<Button onClick={() => doSomething(id)} />

sem afetar o desempenho.

Alguém sabe se o compilador agora suporta funções de seta inline? Gostaria especialmente de saber se alguém que tenha trabalhado no compilador pode confirmar.

Fiz algumas pesquisas no Google e li os documentos, mas não encontrei nenhuma confirmação explícita sobre isso.

javascript

1 respostas

  1. Best Answer

    TL;DR agora você pode escrever funções de manipulador inline novamente, uhu!

    Aparentemente, sim, o compilador extrai e armazena em cache essas funções inline, pelo menos nos casos mais simples: você pode ver o manipulador de cliques sendo extraído para uma constante de nível superior chamada _temp. Pode haver algumas complexidades sobre se ele pode fazer isso para, por exemplo, uma função renderprop, mas isso já é meio ultrapassado neste momento.

    Outra coisa interessante é que, em vez disso useCallback, parece armazenar a função em algum tipo de cache local específico do compilador; veja aqui um exemplo um pouco mais interessante . Você pode ver a chamada para _c(2)configurar um estado persistente em chamadas à função do componente com duas entradas diferentes. Então, em vez de extrair a função inline, ela memoriza todo o valor de retorno e o atualiza apenas quando a contagem muda. Esta é uma escolha um tanto interessante em comparação com o outro padrão mais esperado no caso mais simples.

    Espero que os links não fiquem obsoletos, mas JIC, isto:

    import { useState } from 'react'
export default function MyApp() {
  const [count, setCount] = useState(0);
  return <div onClick={() => console.log(`count: ${String(count)}`)}>Hello World</div>;
}

    está sendo convertido para

    import { c as _c } from "react/compiler-runtime";
import { useState } from "react";
export default function MyApp() {
  const $ = _c(2); // <-- constructs the local scope cache
  const [count] = useState(0);
  let t0;
  if ($[0] !== count) {
    t0 = (
      <div onClick={() => console.log(`count: ${String(count)}`)}>
        Hello World
      </div>
    );
    $[0] = count;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
}

    pelo compilador (o playground não parece fornecer uma versão?).

    • 1

relate perguntas