+1 315 210 4488
+91 99888 06489
16 de Octubre, 2024
React es una biblioteca front-end de Javascript de código abierto para construir interfaces de consumidor. React es fácil de probar, funciona rápido y eficiente, especialmente en la creación de aditivos de interfaz de usuario escalables y reutilizables.
Se ha logrado una declaración del plan de lanzamiento para la próxima versión sólida de React 18 con la ayuda del equipo React. que está disponible en versión beta.
En este artículo, hablaremos sobre algunas de las actualizaciones de funciones de primer nivel para el modelo 18 de reacción con ejemplos de código.
Presentamos la nueva API raíz
Una raíz en React se refiere a la forma de estadísticas de la etapa superior que representa un árbol. En React 18, tendremos dos API raíz: la API raíz heredada y la API raíz nueva.
API raíz heredada
La API raíz heredada es la API actual conocida como enfoque ReactDOM.render. La API raíz heredada es similar a la utilización en el modelo de reacción 17, creará una raíz en modo heredado. Antes de profundizar en la reacción 18 a la producción, se puede introducir una precaución sobre el uso de la API raíz heredada. Poco a poco irá implementando el uso de la nueva API raíz. La API raíz heredada puede quedar obsoleta en las próximas versiones.
Puede consultar el ejemplo de código que se proporciona a continuación:
Nueva API raíz
La nueva API raíz se puede observar con ReactDOM crea un enfoque Root. Primero debemos crear la base a través del enfoque createRoot con los detalles básicos como tema para aplicarlo. Después de eso tenemos que nombrar la raíz. enfoque de renderizado y omita la aplicación debido al parámetro. Mediante el uso de la nueva API raíz, podemos utilizar todas las capacidades multiplicadas y simultáneas disponibles en React 18.
Puede tomar referencia del siguiente código.
Cambios en el método de hidrato
El enfoque de renderizado y el de hidrato son similares. Pero permite conectar a los oyentes del evento con los elementos HTML dentro de los contenedores que se representan mediante el uso del método de servidor ReactDOM en el lado del servidor. Con el enfoque de raíz hidratada, React 18 reemplaza este enfoque de hidratación.
Cambios en la devolución de llamada de renderizado
Desde la nueva raíz, se elimina la devolución de llamada de representación API. Pero podemos pasarlo como propiedad al componente raíz.
Desde la nueva raíz, se elimina la devolución de llamada de API.
Mejora en el procesamiento por lotes automático
En React 18, la función de procesamiento por lotes fusiona más de una actualización nacional en una única representación consolidada para un rendimiento avanzado. Por ejemplo, en caso de que reemplace las tarifas de varios países en un controlador de funciones sencillo. Luego, reaccionar18 agrupará esas actualizaciones en una sola actualización y volverá a renderizar la aplicación solo una vez en lugar de llamar al proceso de renderizado más de una vez.
El rendimiento general de la aplicación mejorará sustancialmente con la ayuda de su uso. También evita que se generen complementos con actualizaciones de país incompletas en las que se actualiza la única variable de país, lo que también puede provocar un comportamiento inapropiado dentro de la aplicación.
La empresa de desarrollo React combinará automáticamente todas las actualizaciones del país, independientemente de dónde se originen. Por lo tanto, si alguna actualización es interna a un tiempo de espera, promesa, controlador de evento local u otro evento, la versión React 18 la procesará por lotes de la misma manera que las actualizaciones de eventos internos de React. Además, esto mejorará el rendimiento general de la aplicación y provocará menos repeticiones de los aditivos en comparación con las versiones anteriores de React.
Deshabilitar el procesamiento por lotes automático
A veces, necesitamos reacondicionar el componente inmediatamente después de cada cambio de estado. En ese escenario, para deshabilitar el procesamiento por lotes automático, utilice el método flushSync.
Suspense
Podemos realizar la renderización del lado del servidor en reaccionar a los servicios de desarrollo nativos renderizando primero todos los componentes en el servidor. Luego, debemos enviar los resultados como elementos HTML al navegador.
React cargará JavaScript como tradicional dentro del navegador. Luego conectará los elementos HTML generados desde el servidor con la lógica javascript y de hidratación.
La representación del lado del servidor (SSR) nos permite ver el contenido de la página antes de que se cargue y ejecute el paquete JavaScript.
La característica de suspenso retrasará la representación de componentes en el desarrollo nativo de reacción. Se introdujo por primera vez en la versión 16.6 de React con obstáculos positivos y una asistencia sencilla para el renderizado de suspenso.
La versión estable de React 18 admitirá una función de suspenso completa basada en la función concurrente, junto con lo siguiente:
- Transición retrasada: Da instrucciones a los componentes para que esperen a que se resuelvan los datos antes de proceder con una nueva transición de estado.
- Limitación de marcador de posición: Limitando la apariencia del marcador de posición anidado y los componentes sucesivos del marcador de posición reduciendo la alteración de la interfaz de usuario.
- Lista suspendida: SuspendList organiza los componentes en el orden en que deben revelarse al usuario.
A diferencia de las versiones anteriores, React 18 maneja el suspenso de manera diferente. Este parece ser un cambio radical. Pero con el procesamiento por lotes automático, el impacto del cambio es mínimo. El proceso de migración de la aplicación a React versión 18 no se ve afectado por esto.
El suspenso en React 16 y 17 se llamaba anteriormente suspenso heredado. El suspenso mejorado en React 18 se llama suspenso concurrente.
En general, tanto las funciones de suspensión heredadas como concurrentes brindan una experiencia de usuario básica similar, además de resolver el método Componente que suspende, como en el siguiente ejemplo.
Aquí hay un ejemplo de una explicación sencilla de las formas en que funcionará un factor de suspenso dentro de las versiones antiguas y nuevas de React 18:
- El suspenso heredado aumentará inmediatamente el factor hermano en el DOM. sus ganchos/resultados de ciclo de vida podrían activarse adicionalmente. No esperará a que se resuelva el componente que se suspende.
- En comparación con el suspenso heredado, el suspenso concurrente no montará el factor hermano en el DOM y tampoco activará sus enlaces/resultados del ciclo de vida hasta que se resuelva el componente que se suspende. Todos los problemas actuales dentro del suspenso heredado podrían resolverse a través de esas nuevas mejoras.
Conmoneda
Para ejecutar múltiples tareas al mismo tiempo, la concurrencia lo ayuda. Si tomamos los servicios estándar de desarrollo de aplicaciones nativas de reacción, por ejemplo. La concurrencia permite la interacción de la interfaz de usuario con los componentes de reacción en el mismo momento en que ejecutamos una acción de animación en un componente.
Anteriormente, todas las actualizaciones tenían la misma prioridad y solo era posible actualizar un estado establecido. La transición inicial La API ayuda a la nueva función de concurrencia a marcar todas las actualizaciones como no urgentes. React los interrumpirá o los pondrá en espera, según la prioridad dada.
Conclusión
Intentamos proporcionar la mejor información y esperamos que la información proporcionada anteriormente sea beneficiosa para usted. Para la comunidad de desarrolladores, la versión estable de React 18 traerá un nuevo y emocionante conjunto de características. La conciencia esencial es la concurrencia y la lenta actualización hacia el modelo más moderno. Dado que sus millas todavía están en versión beta, The reaccionar empresa de desarrollo nativo creó una organización operativa para preparar el entorno para una fácil transición al nuevo modelo.
