React es una librería front-end de JavaScript de código abierto para construir interfaces de usuario. Funciona rápido, es fácil de aprender y es eficiente, especialmente en la creación de componentes de interfaz de usuario escalables y reutilizables.
El equipo de React anunció el plan de lanzamiento de la próxima versión estable de React 18. Ahora, está en fase beta.
En este artículo, vamos a discutir algunas de las maravillosas actualizaciones de características para la versión 18 de React con ejemplos de código.
Presentación de la nueva API raíz
Una raíz en React se refiere a la estructura de datos de nivel superior que representa un árbol. En React 18, tendremos dos APIs de raíz: la API de raíz heredada y la nueva API de raíz.
API raíz heredada
La API de raíz heredada es la API existente llamada con el método ReactDOM.render. Creará una raíz que se ejecuta en modo legacy, que es similar al uso en la versión 17 de React. Antes de pasar React 18 a la producción, se añadirá una advertencia sobre el uso de la API raíz heredada. Se reforzará gradualmente el uso de la nueva API raíz. La API raíz heredada quedará obsoleta en las próximas versiones.
Consulte el siguiente ejemplo de código.
Nueva API root
La nueva API root será invocada con el método ReactDOM.createRoot. Para utilizarla, primero, tenemos que crear la raíz a través del método createRoot con el elemento raíz como argumento. Luego, llamamos al método root.render y pasamos el componente de la app como parámetro. Al utilizar la nueva API root, podemos utilizar todas las mejoras y características concurrentes disponibles en React 18.
Consulte el siguiente código.
Cambios en el método hydrate
El método hydrate es similar al método render. Pero ayuda a adjuntar oyentes de eventos a los elementos HTML dentro de los contenedores que son renderizados por el método ReactDOMServer en el lado del servidor.
React 18 sustituye este método hydrate por el método hydrateRoot.
Consulte el siguiente ejemplo de código.
Cambios en el callback de renderización
El callback de renderización se elimina de la nueva API raíz. Pero podemos pasarla como propiedad al componente raíz.
Consulte el siguiente ejemplo de código.
Mejora de la dosificación automática
La función de agrupación por lotes en React 18 fusiona múltiples actualizaciones de estado en un único rerender consolidado para mejorar el rendimiento. Por ejemplo, si actualizamos más de un valor de estado en un simple manejador de función. Entonces, React 18 agrupará estas actualizaciones en una única actualización y reutilizará la aplicación sólo una vez en lugar de llamar al método de renderización varias veces.
Esto mejorará considerablemente el rendimiento general de la aplicación. También evita que los componentes se rendericen con actualizaciones de estado incompletas en las que solo se actualiza una variable de estado, lo que puede provocar un comportamiento irrelevante en la app.
Consulte el siguiente ejemplo de código.
React 18 procesará por lotes automáticamente todas las actualizaciones de estado, independientemente de dónde se originen. Por lo tanto, si cualquier actualización está dentro de un timeout, promesa, manejador de eventos nativos o cualquier otro evento, la versión de React 18 loteará de la misma manera que las actualizaciones dentro de los eventos de React. Esto mejorará aún más el rendimiento de la aplicación y conducirá a un menor número de re-renderizaciones de los componentes en comparación con las versiones anteriores de React.
Consulte el siguiente código.
Desactivar la dosificación automática
A veces, necesitamos volver a renderizar inmediatamente el componente después de cada cambio de estado. En ese caso, utilice el método flushSync para desactivar el procesamiento por lotes automático.
Suspense
Podemos lograr el renderizado del lado del servidor en React renderizando primero todos los componentes en el servidor. Luego, tenemos que enviar los resultados como elementos HTML al navegador.
En el navegador, React cargará JavaScript como de costumbre. Luego conectará los elementos HTML generados desde el servidor con el JavaScript y la lógica de hydrate.
El renderizado del lado del servidor (SSR) nos permite ver el contenido de la página antes de que el paquete de JavaScript se cargue y ejecute.
La característica de suspense retrasará el renderizado de los componentes en React. Se introdujo por primera vez en la versión 16.6 de React con ciertas limitaciones y soporte básico para el renderizado en suspense.
La versión estable de React 18 soportará la función de suspensión completa basada en la función concurrente, junto con lo siguiente:
- Transición retardada: Indica a los componentes que esperen a que se resuelvan los datos antes de proceder a una nueva transición de estado.
- Aceleración del marcador de posición: Reduce la fatiga de la interfaz de usuario al limitar la aparición de componentes de marcadores de posición anidados y sucesivos.
- Suspender Lista: Ayuda a suspender muchos componentes, organizándolos en el orden en que estos componentes deben ser revelados al usuario.
React 18 maneja el resumen de manera diferente a las versiones anteriores. Esto parece ser un cambio de ruptura. Pero con el batching automático, el impacto del cambio es mínimo. No afectará significativamente al proceso de migración de la app a la versión 18 de React.
Anteriormente, la función de suspense en React 16 y 17 se llamaba legacy suspense. El suspense mejorado en React 18 se llama concurrent suspense.
En general, tanto las funciones suspense heredadas como las concurrentes ofrecen la misma experiencia básica al usuario, aparte de resolver el método ComponentThatSuspends, como en el siguiente ejemplo.
Este ejemplo es una explicación sencilla de cómo funcionará un componente de suspensión en las versiones anteriores y nuevas de React 18:
- Suspense heredado montará inmediatamente el componente Sibling en el DOM. Además, se dispararán sus ganchos/efectos del ciclo de vida. No esperará a que el ComponentThatSuspends se resuelva.
- Suspense concurrente no montará el componente Sibling en el DOM y sus ganchos/efectos del ciclo de vida no se dispararán hasta que se resuelva el ComponentThatSuspends. Esta nueva mejora resolverá todos los problemas existentes en el suspenso heredado.
Concurrencia
La concurrencia te permite ejecutar múltiples tareas al mismo tiempo. Por ejemplo, tomemos una aplicación React estándar. Mientras se ejecuta una acción de animación en un componente, la concurrencia permitirá la interacción de la UI con los otros componentes de React al mismo tiempo.
Anteriormente, sólo era posible una actualización de setState a la vez y todas las actualizaciones tenían la misma prioridad. La nueva función concurrente con la API startTransition marcará todas las actualizaciones como no urgentes. Basándose en la prioridad dada, React las interrumpirá o las pondrá en espera.
NOTA: No habrá cambios de última hora en el comportamiento de los componentes relacionados con la concurrencia en React 18. Por lo tanto, podemos elegir si lo usamos o no.
Referencia de GitHub
Para más detalles, consulte las siguientes referencias de GitHub:
- Nueva arquitectura SSR de suspensión en React 18
- Cinco características importantes de React 18
- React concurrente para mantenedores de bibliotecas
Conclusión
Gracias por llegar hasta aquí. La próxima versión estable de React 18 traerá un emocionante conjunto de nuevas características para la comunidad de desarrolladores. El enfoque principal es la concurrencia y la actualización gradual a la nueva versión. Dado que todavía está en fase beta, el equipo de React creó un grupo de trabajo para preparar el ecosistema para una transición suave a la nueva versión.
Los componentes de interfaz de usuario de Syncfusion React JS siempre serán compatibles con las últimas versiones de React.