React Native 0.79: Herramientas más rápidas y mucho más

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

¡Hoy nos complace anunciar la versión 0.79 de React Native!

Esta versión incluye mejoras de rendimiento en varios frentes, así como varias correcciones de errores. Primero, Metro ahora inicia más rápido gracias al hashing diferido y cuenta con soporte estable para exportaciones de paquetes. El tiempo de inicio en Android también mejorará gracias a cambios en la compresión del bundle JS y otras optimizaciones.

Lo más destacado

• Nuevas características de Metro

• JSC se traslada a un paquete comunitario

• iOS: Registro de módulos nativos compatible con Swift

• Android: Inicio de aplicaciones más rápido

• Eliminación de la depuración remota de JS

Lo más destacado

Metro: Inicio más rápido y soporte para exportaciones de paquetes

Esta versión incluye Metro 0.82. Esta actualización utiliza hashing diferido para mejorar la velocidad del primer yarn start típicamente en más de 3 veces (aún más en proyectos grandes y monorepos), acelerando tu experiencia de desarrollo y compilaciones de CI diarias.

Además en Metro 0.82, promovemos a estable la resolución de los campos package.json "exports" e "imports". La resolución de "exports" se introdujo en React Native 0.72, y el soporte para "imports" se añadió mediante una contribución comunitaria; ambos estarán habilitados por defecto en todos los proyectos con React Native 0.79.

Esto mejora la compatibilidad con dependencias modernas de npm y abre nuevas formas estándar para organizar tus proyectos.

Cambio importante

Aunque hemos probado package.json "exports" en la comunidad durante un tiempo, esta transición puede representar un cambio importante para ciertos paquetes y configuraciones de proyectos.

En particular, conocemos incompatibilidades reportadas en paquetes populares como Firebase y AWS Amplify, y estamos trabajando para corregirlas en el origen.

Si encuentras problemas:

• Actualiza al hotfix Metro 0.81.5, o configura resolver.unstable_enablePackageExports = false para desactivarlo.
• Consulta expo/expo#36551 para paquetes afectados y actualizaciones futuras.

JSC se traslada a un paquete comunitario

Como parte de nuestro esfuerzo por reducir la superficie de la API de React Native, estamos trasladando el motor JavaScriptCore (JSC) a un paquete mantenido por la comunidad: @react-native-community/javascriptcore

Este cambio no afectará a los usuarios que utilizan Hermes.

A partir de React Native 0.79, puedes usar una versión de JSC mantenida por la comunidad siguiendo las instrucciones de instalación en el README. La versión de JSC proporcionada por el núcleo de React Native seguirá disponible en 0.79, pero planeamos eliminarla en un futuro cercano.

Trasladar JSC a un paquete mantenido por la comunidad nos permitirá actualizar su versión con mayor frecuencia y ofrecerte las últimas funciones. El JSC mantenido por la comunidad seguirá un calendario de lanzamientos independiente de React Native.

iOS: Registro de módulos nativos compatibles con Swift

En esta versión, renovamos la forma de registrar tus módulos nativos en el entorno de ejecución de React Native. El nuevo enfoque sigue la misma metodología que los componentes, descrita en la documentación oficial.

Desde esta versión de React Native, puedes registrar tus módulos modificando el archivo package.json. Introducimos un nuevo campo modulesProvider en la propiedad ios:

"codegenConfig": {
     "ios": {
+       "modulesProvider": {
+         "JS Name for the module": "ObjC Module provider for the pure C++ TM or a class conforming to RCTTurboModule"
+     }
    }
}

Codegen se encargará de generar todo el código relevante a partir de tu archivo package.json.

Si utilizas un módulo nativo puramente en C++, deberás seguir esta configuración recomendada:

Configure pure C++Native Modules in your app

For pure C++ Native Modules, you need to add a new ObjectiveC++ class to glue together the C++ Native Module with the rest of the App:

CppNativeModuleProvider.h

#import <Foundation/Foundation.h>
#import <ReactCommon/RCTTurboModule.h>

NS_ASSUME_NONNULL_BEGIN

@interface <YourNativeModule>Provider : NSObject <RCTModuleProvider>

@end

CppNativeModuleProvider.mm

NS_ASSUME_NONNULL_END

#import "<YourNativeModule>Provider.h"
#import <ReactCommon/CallInvoker.h>
#import <ReactCommon/TurboModule.h>
#import "<YourNativeModule>.h"

@implementation NativeSampleModuleProvider

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
}

Con este nuevo enfoque, unificamos el registro de módulos nativos tanto para desarrolladores de aplicaciones como para mantenedores de bibliotecas. Las bibliotecas pueden especificar las mismas propiedades en su package.json y Codegen se encargará del resto.

Este método soluciona la limitación introducida en la versión 0.77 que impedía registrar un módulo nativo puro en C++ con un AppDelegate en Swift. Como puedes observar, ninguno de estos cambios modifica el AppDelegate y el código generado funcionará tanto para AppDelegate implementados en Swift como en Objective-C.

Android: Inicio más rápido de la aplicación

También incluimos un cambio que mejora significativamente el tiempo de inicio en Android.

A partir de esta versión, dejaremos de comprimir el paquete JavaScript dentro del APK. Anteriormente, el sistema Android necesitaba descomprimir el paquete JavaScript antes de que tu aplicación pudiera iniciarse, lo que causaba una ralentización significativa durante el arranque.

Desde esta versión, enviaremos el paquete JavaScript sin comprimir por defecto, por lo que tus aplicaciones Android iniciarán generalmente más rápido.

El equipo de Margelo probó esta función en la aplicación Discord y obtuvo un impulso significativo de rendimiento: el tiempo hasta interactividad (TTI) de Discord se redujo en 400ms, lo que representa una aceleración del 12% con solo un cambio de línea (probado en un Samsung A14).

Por otro lado, almacenar el paquete sin comprimir resultará en un mayor consumo de espacio para tu aplicación en el dispositivo del usuario. Si esto es un problema, puedes ajustar este comportamiento usando la propiedad enableBundleCompression en tu archivo app/build.gradle.

app/build.gradle

react {
  // ...
  // If you want to compress the JS bundle (slower startup, less
  // space consumption)
  enableBundleCompression = true
  // If don't you want to compress the JS bundle (faster startup,
  // higher space consumption)
  enableBundleCompression = false

  // Default is `false`
}

Ten en cuenta que el tamaño del APK aumentará en esta versión, pero tus usuarios no pagarán el costo adicional en tamaño de descarga, ya que los APK se comprimen al descargarse desde la red.

Cambios importantes

Eliminación de la depuración remota de JS

Como parte de nuestros esfuerzos continuos para mejorar la depuración, eliminamos la depuración remota de JS a través de Chrome. Este método de depuración heredado fue desaprobado y convertido en opción de runtime en React Native 0.73. Utiliza React Native DevTools para una depuración moderna y confiable.

Esto también significa que React Native ya no es compatible con el proyecto comunitario react-native-debugger. Para desarrolladores que deseen usar extensiones de depuración de terceros, como Redux DevTools, recomendamos Expo DevTools Plugins o integrar las versiones independientes de estas herramientas.

Consulta más información en esta publicación dedicada.

Módulos internos actualizados a sintaxis export

Como parte de la modernización de nuestra base de código JavaScript, hemos actualizado varios módulos de implementación dentro de react-native para usar consistentemente la sintaxis export en lugar de module.exports.

Hemos actualizado aproximadamente 46 API en total, que puedes consultar en el registro de cambios.

Este cambio tiene un impacto sutil en las importaciones existentes:

Case 1: Default export

  // CHANGED - require() syntax
- const ImageBackground = require('react-native/Libraries/Image/ImageBackground');
+ const ImageBackground = require('react-native/Libraries/Image/ImageBackground').default;

// Unchanged - import syntax
import ImageBackground from 'react-native/Libraries/Image/ImageBackground';

// RECOMMENDED - root import
import {ImageBackground} from 'react-native';

Case 2: Secondary exports

There are very few cases of this pattern, again unaffected when using the root 'react-native' import.

  // Unchanged - require() syntax
  const BlobRegistry = require('react-native/Libraries/Blob/BlobRegistry');

  // Unchanged - require() syntax with destructuring
  const {register, unregister} = require('react-native/Libraries/Blob/BlobRegistry');

  // CHANGED - import syntax as single object
- import BlobRegistry from 'react-native/Libraries/Blob/BlobRegistry';
+ import * as BlobRegistry from 'react-native/Libraries/Blob/BlobRegistry';


  // Unchanged - import syntax with destructuring
  import {register, unregister} from 'react-native/Libraries/Blob/BlobRegistry';

  // RECOMMENDED - root import
  import {BlobRegistry} from 'react-native';

Esperamos que el impacto de este cambio sea extremadamente limitado, especialmente para proyectos escritos en TypeScript que usan sintaxis import. Por favor verifica cualquier error de tipo para actualizar tu código.

consejo

Se recomienda encarecidamente importar desde la raíz react-native

Como práctica general, recomendamos fuertemente importar desde la ruta raíz 'react-native' para evitar cambios disruptivos adicionales en el futuro. En nuestra próxima versión, dejaremos de dar soporte a las importaciones profundas como parte de la mejor definición de la API pública de JavaScript de React Native (consulta la RFC).

Otros cambios importantes

Esta lista contiene otros cambios disruptivos que podrían tener un impacto menor en tu código de producción y vale la pena mencionar:

• Longitudes sin unidades no válidas en sombras de caja y filtros:

  • Para mejorar el cumplimiento de React Native con las especificaciones CSS/Web, ya no admitimos longitudes sin unidades en box-shadow y filter. Esto significa que si usabas un box-shadow como 1 1 black ya no se renderizará. Debes especificar unidades como 1px 1px black

• Eliminación del soporte para sintaxis incorrecta de hwb() en normalize-color:

  • Para alinear mejor React Native con las especificaciones CSS/Web, ahora restringimos sintaxis no válidas para hwb(). Históricamente se admitían valores separados por comas (ej. hwb(0, 0%, 100%)), lo cual ya no es compatible (debes migrar a hwb(0 0% 100%)). Puedes leer más sobre este cambio aquí.

• Actualización de exportaciones en Libraries/Core/ExceptionsManager

  • Como parte de la modernización de la API JS de React Native, actualizamos ExceptionsManager para exportar un objeto ExceptionsManager por defecto, y SyntheticError como exportación secundaria.

Agradecimientos

React Native 0.79 contiene más de 944 commits de 100 colaboradores. ¡Gracias por todo su arduo trabajo!

Queremos agradecer especialmente a estos miembros de la comunidad que realizaron contribuciones significativas en esta versión:

• Marc Rousavy por desarrollar y documentar la función "Android: Inicio más rápido de aplicaciones"

• Kudo Chien y Oskar Kwaśniewski por trabajar en el paquete @react-native-community/javascriptcore y escribir la sección "JSC se traslada a un paquete comunitario"

• James Lawson por agregar soporte para resolución de subrutas de importación en Metro.

Además, queremos agradecer a los autores adicionales que trabajaron en documentar características en esta publicación:

• Rob Hogan por la sección "Nuevas características de Metro"

• Alex Hunt por las secciones "Eliminación de la depuración remota de JS" e "Módulos internos actualizados a la sintaxis de exportación"

• Riccardo Cipolleschi por el trabajo en el registro de módulos nativos en iOS

Actualización a la versión 0.79

Usa el React Native Upgrade Helper para ver cambios de código entre versiones de React Native en proyectos existentes, además de la documentación de actualización.

Para crear un nuevo proyecto:

npx @react-native-community/cli@latest init MyProject --version latest

Si usas Expo, React Native 0.79 será compatible en la próxima Expo SDK 53 como la versión predeterminada de React Native.

información

0.79 es ahora la última versión estable de React Native y 0.76.x pasa a no ser compatible. Para más información, consulta la política de soporte de React Native. Nuestro objetivo es publicar una actualización final de fin de vida para 0.76 en un futuro próximo.