Adopción incremental

React Compiler se puede adoptar de forma incremental, lo que te permite probarlo primero en partes específicas de tu base de código. Esta guía te muestra cómo implementar gradualmente el compilador en proyectos existentes.

¿Por qué adopción incremental?

React Compiler está diseñado para optimizar automáticamente toda tu base de código, pero no tienes que adoptarlo todo a la vez. La adopción incremental te da control sobre el proceso de implementación, permitiéndote probar el compilador en pequeñas partes de tu aplicación antes de expandirlo al resto.

Comenzar de a poco te ayuda a generar confianza en las optimizaciones del compilador. Puedes verificar que tu aplicación se comporte correctamente con el código compilado, medir las mejoras de rendimiento e identificar cualquier caso límite específico de tu base de código. Este enfoque es especialmente valioso para aplicaciones de producción donde la estabilidad es crítica.

La adopción incremental también facilita abordar cualquier violación de las Reglas de React que el compilador pueda encontrar. En lugar de corregir violaciones en toda tu base de código de una vez, puedes abordarlas sistemáticamente a medida que expandes la cobertura del compilador. Esto mantiene la migración manejable y reduce el riesgo de introducir errores.

Al controlar qué partes de tu código se compilan, también puedes ejecutar pruebas A/B para medir el impacto en el mundo real de las optimizaciones del compilador. Estos datos te ayudan a tomar decisiones informadas sobre la adopción completa y demuestran el valor para tu equipo.

Enfoques para la adopción incremental

Existen tres enfoques principales para adoptar React Compiler de forma incremental:

1. Anulaciones de Babel- Aplicar el compilador a directorios específicos
2. Participación voluntaria con "use memo"- Solo compilar componentes que participen explícitamente
3. Compuertas en tiempo de ejecución- Controlar la compilación con banderas de características

Todos los enfoques te permiten probar el compilador en partes específicas de tu aplicación antes de una implementación completa.

Adopción basada en directorios con anulaciones de Babel

La opciónoverridesde Babel te permite aplicar diferentes plugins a diferentes partes de tu base de código. Esto es ideal para adoptar gradualmente React Compiler directorio por directorio.

Configuración básica

Comienza aplicando el compilador a un directorio específico:

Expandir la cobertura

A medida que ganes confianza, agrega más directorios:

Con opciones del compilador

También puedes configurar opciones del compilador por anulación:

Modo de participación voluntaria con "use memo"

Para un control máximo, puedes usarcompilationMode: 'annotation'para compilar solo componentes y hooks que participen explícitamente con la directiva"use memo".

Configuración del modo de anotación

Usando la directiva

Agrega"use memo"al principio de las funciones que quieras compilar:

ConcompilationMode: 'annotation', debes:

• Agregar"use memo"a cada componente que quieras optimizar
• Agregar"use memo"a cada hook personalizado
• Recordar agregarlo a los nuevos componentes

Esto te da un control preciso sobre qué componentes se compilan mientras evalúas el impacto del compilador.

Banderas de Características en Tiempo de Ejecución con Gating

La opcióngatingte permite controlar la compilación en tiempo de ejecución usando banderas de características. Esto es útil para ejecutar pruebas A/B o implementar gradualmente el compilador basándose en segmentos de usuarios.

Cómo Funciona Gating

El compilador envuelve el código optimizado en una verificación en tiempo de ejecución. Si la puerta devuelvetrue, se ejecuta la versión optimizada. De lo contrario, se ejecuta el código original.

Configuración de Gating

Implementando la Bandera de Característica

Crea un módulo que exporte tu función de gating:

Solución de Problemas de Adopción

Si encuentras problemas durante la adopción:

1. Usa"use no memo"para excluir temporalmente componentes problemáticos
2. Consulta laguía de depuraciónpara problemas comunes
3. Corrige las violaciones de las Reglas de React identificadas por el plugin de ESLint
4. Considera usarcompilationMode: 'annotation'para una adopción más gradual

Próximos Pasos

• Lee laguía de configuraciónpara más opciones
• Aprende sobretécnicas de depuración
• Consulta lareferencia de la APIpara todas las opciones del compilador