Cómo actualizar a React 18

Cómo actualizar a React 18

¡React 18 ya está disponible en npm!


La última versión principal incluye mejoras inmediatas, como la creación automática de lotes, nuevas API, como startTransition, y streaming server-side con soporte para Suspense.


Muchas de las características de React 18 están construidas sobre nuestro nuevo renderizador concurrente, un cambio entre bastidores que desbloquea nuevas y potentes capacidades. React concurrente es opcional (solo se activa cuando se utiliza una función concurrente), pero creemos que tendrá un gran impacto en la forma de crear aplicaciones.


índice de contenido

1. Actualización de React 17 a React 18


2. Novedades de React 18


3. Nueva función: Transiciones


4. Nuevas características del Suspense


5. Nuevas APIs de renderización de clientes y servidores


6. Cliente React DOM


7. Servidor React DOM


8. Conclusión


Actualización de React 17 a React 18

La actualización de React 17 a 18 sólo requiere dos sencillos pasos:


Instalar por Plantilla CRA: CRA


Instalación manual:


Vaya a su archivo de entrada raíz (typically index.js) y cambie la importación de react-dom 


a


También reemplaza el método ReactDOM.render() en ese mismo archivo.


debería cambiarse por:


Ahora:


Ejecute npm run start o yarn start para iniciar el servidor de desarrollo en [http://localhost:3000](http://localhost:3000) Visite [http://localhost:3000](http://localhost:3000) para ver su solicitud.


Y eso es todo lo que se debe hacer, no hay que cambiar ningún otro código. React 18 tampoco cambia la forma de escribir el código de React, por lo tanto no hay que volver a aprender todo.


Novedades de React 18

Nueva función: Batching automático


El Batching es cuando React agrupa múltiples actualizaciones de estado en una sola re-renderización para mejorar el rendimiento. Sin el batching automático, sólo se agrupaban las actualizaciones dentro de los manejadores de eventos de React. Las actualizaciones dentro de las promesas, setTimeout, manejadores de eventos nativos o cualquier otro evento no se agrupan por lotes en React por defecto. Con la dosificación automática, estas actualizaciones se dosificarán automáticamente:


Nueva función: Transiciones

Una transición es un nuevo concepto en React para distinguir entre actualizaciones urgentes y no urgentes.


  • Las actualizaciones urgentes reflejan la interacción directa, como teclear, hacer clic, pulsar, etc.
  • Las actualizaciones de transición hacen que la interfaz de usuario pase de una vista a otra.

Normalmente, para obtener la mejor experiencia de usuario, una sola entrada de usuario debería dar lugar a una actualización urgente y a otra no urgente. Puedes utilizar la API startTransition dentro de un evento de entrada para informar a React de qué actualizaciones son urgentes y cuáles son "transiciones":


Las actualizaciones envueltas en startTransition se manejan como no urgentes y se interrumpirán si llegan actualizaciones más urgentes como clics o pulsaciones de teclas. Si una transición es interrumpida por el usuario (por ejemplo, al teclear varios caracteres seguidos), React desechará el trabajo de renderizado antiguo que no haya terminado y renderizará solo la última actualización.


  • useTransition: hook para iniciar transiciones, incluyendo un valor para rastrear el estado pendiente.
  • startTransition: un método para iniciar transiciones cuando el hook no puede ser utilizado. Las transiciones optarán por el renderizado concurrente, lo que permite interrumpir la actualización.

Nuevas características del Suspense

Suspense permite especificar declarativamente el estado de carga de una parte del árbol de componentes si aún no está lista para ser mostrada:


Suspense hace que el "estado de carga de la UI" sea un concepto declarativo de primera clase en el modelo de programación de React. Esto nos permite construir características de nivel superior sobre él.


Nuevas APIs de renderización de clientes y servidores

Estos cambios permiten a los usuarios seguir utilizando las antiguas APIs en modo React 17 mientras se actualizan a las nuevas APIs en React 18.


Cliente React DOM

Estas nuevas APIs se exportan ahora desde react-dom/client:


  • createRoot: Nuevo método para crear una raíz para renderizar o desmontar. Úselo en lugar de ReactDOM.render. Las nuevas características de React 18 no funcionan sin él.
  • hydrateRoot: Nuevo método para hydrate una aplicación renderizada en el servidor. Utilízalo en lugar de ReactDOM.hydrate junto con las nuevas APIs del servidor React DOM. Las nuevas características de React 18 no funcionan sin él.

Tanto createRoot como hydrateRoo aceptan una nueva opción llamada onRecoverableError en caso de que quieras ser notificado cuando React se recupere de los errores durante el renderizado para el registro. Por defecto, React utilizará reportError, o console.error en los navegadores más antiguos.


Servidor React DOM

Estas nuevas APIs se exportan ahora desde react-dom/server y son totalmente compatibles con el streaming Suspense en el server:


  • renderToPipeableStream: para el streaming en entornos Node.
  • renderToReadableStream: para entornos de ejecución de borde modernos, como los trabajadores de Deno y Cloudflare.

Conclusión

Por fin tenemos un poco de conceptos de React 18 - nuevas características y mucho más... ¡Es momento de implementar estas nuevas actualizaciones!


¡Gracias por llegar a aquí!


Reactions

0

0

0

0

Access hereTo be able to comment

TheWhiteCode.com is not the creator or owner of the images shown, references are: