Adoção Incremental

O React Compiler pode ser adotado de forma incremental, permitindo que você o teste primeiro em partes específicas da sua base de código. Este guia mostra como implementar gradualmente o compilador em projetos existentes.

Por que Adoção Incremental?

O React Compiler foi projetado para otimizar automaticamente toda a sua base de código, mas você não precisa adotá-lo de uma só vez. A adoção incremental dá a você controle sobre o processo de implementação, permitindo testar o compilador em pequenas partes do seu aplicativo antes de expandir para o restante.

Começar pequeno ajuda a construir confiança nas otimizações do compilador. Você pode verificar se seu aplicativo se comporta corretamente com o código compilado, medir melhorias de desempenho e identificar quaisquer casos específicos da sua base de código. Essa abordagem é especialmente valiosa para aplicações de produção onde a estabilidade é crítica.

A adoção incremental também facilita a correção de quaisquer violações das Regras do React que o compilador possa encontrar. Em vez de corrigir violações em toda a sua base de código de uma vez, você pode resolvê-las sistematicamente à medida que expande a cobertura do compilador. Isso mantém a migração gerenciável e reduz o risco de introduzir bugs.

Ao controlar quais partes do seu código são compiladas, você também pode executar testes A/B para medir o impacto real das otimizações do compilador. Esses dados ajudam você a tomar decisões informadas sobre a adoção completa e demonstram o valor para sua equipe.

Abordagens para Adoção Incremental

Existem três abordagens principais para adotar o React Compiler de forma incremental:

1. Substituições do Babel- Aplicar o compilador a diretórios específicos
2. Opt-in com “use memo”- Compilar apenas componentes que optam explicitamente
3. Controle em tempo de execução- Controlar a compilação com flags de recurso

Todas as abordagens permitem que você teste o compilador em partes específicas do seu aplicativo antes da implementação completa.

Adoção Baseada em Diretório com Substituições do Babel

A opçãooverridesdo Babel permite aplicar plugins diferentes a partes diferentes da sua base de código. Isso é ideal para adotar gradualmente o React Compiler diretório por diretório.

Configuração Básica

Comece aplicando o compilador a um diretório específico:

Expandindo a Cobertura

À medida que ganha confiança, adicione mais diretórios:

Com Opções do Compilador

Você também pode configurar opções do compilador por substituição:

Modo Opt-in com “use memo”

Para controle máximo, você pode usarcompilationMode: 'annotation'para compilar apenas componentes e hooks que optam explicitamente com a diretiva"use memo".

Configuração do Modo de Anotação

Usando a Diretiva

Adicione"use memo"no início das funções que você deseja compilar:

ComcompilationMode: 'annotation', você deve:

• Adicionar"use memo"a cada componente que deseja otimizar
• Adicionar"use memo"a cada hook personalizado
• Lembrar de adicioná-lo a novos componentes

Isso lhe dá controle preciso sobre quais componentes são compilados enquanto você avalia o impacto do compilador.

Flags de Funcionalidade em Tempo de Execução com Gating

A opçãogatingpermite que você controle a compilação em tempo de execução usando flags de funcionalidade. Isso é útil para executar testes A/B ou implementar gradualmente o compilador com base em segmentos de usuários.

Como o Gating Funciona

O compilador envolve o código otimizado em uma verificação de tempo de execução. Se o gate retornartrue, a versão otimizada é executada. Caso contrário, o código original é executado.

Configuração do Gating

Implementando a Flag de Funcionalidade

Crie um módulo que exporte sua função de gating:

Solução de Problemas na Adoção

Se você encontrar problemas durante a adoção:

1. Use"use no memo"para excluir temporariamente componentes problemáticos
2. Consulte oguia de depuraçãopara problemas comuns
3. Corrija violações das Regras do React identificadas pelo plugin ESLint
4. Considere usarcompilationMode: 'annotation'para uma adoção mais gradual

Próximos Passos

• Leia oguia de configuraçãopara mais opções
• Saiba mais sobretécnicas de depuração
• Consulte areferência da APIpara todas as opções do compilador