v19.2Latest

Instalação

Este guia irá ajudá-lo a instalar e configurar o React Compiler na sua aplicação React.

Você aprenderá
  • Como instalar o React Compiler
  • Configuração básica para diferentes ferramentas de build
  • Como verificar se sua configuração está funcionando

Pré-requisitos

O React Compiler foi projetado para funcionar melhor com o React 19, mas também suporta o React 17 e 18. Saiba mais sobrecompatibilidade de versões do React.

Instalação

Instale o React Compiler como umadevDependency:

npm install -D babel-plugin-react-compiler@latest

Ou com Yarn:

yarn add -D babel-plugin-react-compiler@latest

Ou com pnpm:

pnpm install -D babel-plugin-react-compiler@latest

Configuração Básica

O React Compiler foi projetado para funcionar por padrão sem nenhuma configuração. No entanto, se você precisar configurá-lo em circunstâncias especiais (por exemplo, para direcionar versões do React abaixo da 19), consulte areferência de opções do compilador.

O processo de configuração depende da sua ferramenta de build. O React Compiler inclui um plugin Babel que se integra ao seu pipeline de build.

Armadilha

O React Compiler deve ser executadoprimeirono seu pipeline de plugins Babel. O compilador precisa das informações originais do código-fonte para uma análise adequada, portanto ele deve processar seu código antes de outras transformações.

Babel

Crie ou atualize seubabel.config.js:

Vite

Se você usa Vite, pode adicionar o plugin ao vite-plugin-react:

Alternativamente, se você preferir um plugin Babel separado para o Vite:

npm install -D vite-plugin-babel

Next.js

Consulte adocumentação do Next.jspara mais informações.

React Router

Instale ovite-plugin-babele adicione o plugin Babel do compilador a ele:

npm install vite-plugin-babel

Webpack

Um loader da comunidade para webpack estádisponível aqui.

Expo

Consulte adocumentação do Expopara habilitar e usar o React Compiler em aplicativos Expo.

Metro (React Native)

O React Native usa Babel via Metro, portanto consulte a seçãoUso com Babelpara instruções de instalação.

Rspack

Consulte adocumentação do Rspackpara habilitar e usar o React Compiler em aplicativos Rspack.

Rsbuild

Consulte adocumentação do Rsbuildpara habilitar e usar o React Compiler em aplicativos Rsbuild.

Integração com ESLint

O React Compiler inclui uma regra ESLint que ajuda a identificar código que não pode ser otimizado. Quando a regra ESLint reporta um erro, significa que o compilador irá pular a otimização daquele componente ou hook específico. Isso é seguro: o compilador continuará otimizando outras partes da sua base de código. Você não precisa corrigir todas as violações imediatamente. Resolva-as no seu próprio ritmo para aumentar gradualmente o número de componentes otimizados.

Instale o plugin ESLint:

npm install -D eslint-plugin-react-hooks@latest

Se você ainda não configurou o eslint-plugin-react-hooks, siga asinstruções de instalação no readme. As regras do compilador estão disponíveis no presetrecommended-latest.

A regra ESLint irá:

  • Identificar violações dasRegras do React
  • Mostrar quais componentes não podem ser otimizados
  • Fornecer mensagens de erro úteis para corrigir problemas

Verifique sua Configuração

Após a instalação, verifique se o React Compiler está funcionando corretamente.

Verifique o React DevTools

Componentes otimizados pelo React Compiler mostrarão um emblema "Memo ✨" no React DevTools:

  1. Instale a extensão de navegadorReact Developer Tools
  2. Abra seu aplicativo no modo de desenvolvimento
  3. Abra o React DevTools
  4. Procure pelo emoji ✨ ao lado dos nomes dos componentes

Se o compilador estiver funcionando:

  • Os componentes mostrarão um emblema "Memo ✨" no React DevTools
  • Cálculos custosos serão automaticamente memoizados
  • NenhumuseMemomanual é necessário

Verifique a Saída da Compilação

Você também pode verificar se o compilador está em execução verificando a saída da sua compilação. O código compilado incluirá a lógica de memoização automática que o compilador adiciona automaticamente.

Solução de Problemas

Excluindo componentes específicos

Se um componente estiver causando problemas após a compilação, você pode temporariamente excluí-lo usando a diretiva"use no memo":

Isso instrui o compilador a pular a otimização para este componente específico. Você deve corrigir o problema subjacente e remover a diretiva uma vez resolvido.

Para mais ajuda na solução de problemas, consulte oguia de depuração.

Próximos Passos

Agora que você tem o React Compiler instalado, saiba mais sobre:

上一篇Introdução下一篇Adoção Incremental