Se anuncia React 18: características clave esperadas

4

Recientemente, el sitio web oficial de React anunció una nueva actualización que se lanzará para React 18.

Aunque sin una fecha de lanzamiento específica anunciada y estando disponible solo en alfa, las últimas adiciones de lanzamiento de React 18 parecen muy prometedoras.

ReactJS es una biblioteca de código abierto que se ejecuta en Javascript y ha sido muy popular entre los desarrolladores de software en los últimos años. También se ha considerado un gran recurso para nuevas empresas y líderes empresariales. Diseñado por Facebook , ganó popularidad debido a su capacidad para ayudar a crear aplicaciones web ricas en UI que son rápidas y eficientes, desarrolladas con una codificación mínima. La simplicidad y flexibilidad de React es lo que conectó con sus usuarios. Conglomerados como PayPal, Uber e Instagram usan React para resolver sus problemas de interfaz de usuario. 

Aquí hay un resumen de las últimas adiciones y cambios que se esperan en React 18:

Lote automático 

El procesamiento por lotes ocurre cuando React agrupa varias actualizaciones en un solo estado de renderizado para lograr un mejor rendimiento computacional. Esto también impidió que los componentes mostraran estados “Half-Finished” donde solo se había actualizado una variable de estado antes, causando varios errores en ocasiones. Sin embargo, React no lotearía las actualizaciones cada vez y más bien realizaría dos lotes independientes . React 18 se agregará con una actualización de mejora del rendimiento, donde automáticamente agrupará las actualizaciones, independientemente del origen, tanto para la aplicacióny el código de la biblioteca. Las actualizaciones dentro de los tiempos de espera, las promesas o incluso los controladores de eventos nativos se agruparán de la misma manera que las actualizaciones dentro de los eventos React. Esto agregará una mejora inmediata al tiempo de renderizado y un rendimiento aún mejor. Con este problema abordado en React 18, hace que el proceso de procesamiento por lotes sea más eficiente y consistente. Haga clic aquí para ver una demostración de cómo funciona la nueva técnica de procesamiento por lotes. 

función App () {
  const [cuenta, setCount] = useState (0);
  const [bandera, setFlag] = useState (falso);

  function handleClick () {
    fetchSomething (). luego (() => {

      // React 18 y posterior HACE lotes de estos:

      setCount (c => c + 1);
      setFlag (f =>! f);
      // React solo se volverá a renderizar una vez al final (¡eso es procesamiento por lotes!)

    });
  }

  regreso (
    <div>
      <button onClick = {handleClick}> Siguiente </button>
      <h1 style = {{color: flag? "azul": "negro"}}> {recuento} </h1>
    </div>
  );
}
}

Fuente del código: React’s Github

Característica agregada: startTransition para renderizado concurrente

Durante las interacciones con la interfaz de usuario para pequeñas acciones como hacer clic en un botón o escribir una entrada, puede ocurrir que la página se congele, interrumpiendo el flujo de trabajo. En React 18, se introdujo una nueva API conocida como startTransition que ayuda a mantener la aplicación receptiva incluso durante las actualizaciones de pantalla grande. La API mejora sustancialmente las interacciones del usuario al marcar movimientos específicos como “transiciones”. Esto permite que React esté informado sobre qué actualizaciones son importantes y cuáles no. Las transiciones aquí se interrumpen por actualizaciones urgentes y las transiciones irrelevantes anteriores se descartan. Esto permite que la interfaz de usuario ignore las actualizaciones secundarias que podrían ser de naturaleza más lenta. startTransition mueve las actualizaciones a un segundo plano, que consiste en un procesamiento complejo o en la obtención de datos más lenta debido a la conectividad de la red.aquí . 

Nuevo SSR de suspensión e hidratación selectiva 

La representación del lado del servidor, también conocida como SSR, es un componente que le permite generar HTML a partir de componentes de React directamente en el servidor y compartir el HTML con los usuarios. Los usuarios pueden ver una vista previa de la página a través de SSR incluso antes de que el paquete javascript presente cargas y se ejecute. Pero a veces, el javascript en el backend tarda mucho en procesarse, y el tiempo necesario se conoce como tiempo de hidratación. React 18 incluirá mejoras arquitectónicas en el rendimiento de React SSR. La nueva actualización permitirá Streaming HTML directamente en el servidor, es decir, el servidor envía piezas de componentes a medida que se renderizan utilizando otro componente conocido como Suspense, que decide qué partes de la aplicación pueden tardar más en cargar y qué se renderizarán directamente. Usando un método de hidratación selectiva, Los componentes envueltos con Suspense ya no bloquearán la hidratación. Cada componente listo comenzará a hidratarse una vez que el navegador obtenga tanto su contenido como su código javascript. Consulte una demostración del mundo real de esta actualización mediante el enlaceaquí . 

Mejoras en la API raíz

La API raíz en React es un puntero para las estructuras de datos de nivel superior en la aplicación que React usa para rastrear un árbol de renderizado. Se implementarán dos API raíz diferentes cuando se utilice la nueva versión de React 18, la API raíz heredada y ReactDOM.createRoot. La API raíz heredada ejecutará una API raíz en modo heredado, activará advertencias cuando la API esté obsoleta y sugerirá moverla a la nueva API raíz. La nueva API raíz conocida como ReactDOM.createRoot agregará todas las mejoras a la aplicación y permitirá funciones de modo concurrente. 

API raíz antigua:

importar Reaccionar desde 'reaccionar';
importar ReactDOM desde 'react-dom';
importar la aplicación desde la 'Aplicación';
ReactDOM.render (<App />, document.getElementById ('root'));

Nueva API raíz:

importar ReactDOM desde 'react-dom';
importar la aplicación desde la 'Aplicación';
const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (<Aplicación />);

Uno de los mayores cambios de la nueva API raíz será la eliminación del método de hidratación y se pasará un apoyo al componente de nivel superior presente.  

Actualización fácil 

Como la concurrencia en React 18 es subjetiva, con cambios mínimos o nulos en los códigos de aplicación ya creados, uno puede actualizar a la versión React 18 fácilmente. Los usuarios podrán convertir varias aplicaciones a React 18 en una sola tarde. La compañía ha probado esto mediante la implementación de varios componentes de funciones simultáneas en Facebook, y la mayoría de los componentes funcionan sin realizar cambios adicionales. . 

Resumiendo 

Con muchas características menores aún por anunciar, la nueva actualización de React 18 parece impactante. El nuevo React ha abierto nuevas posibilidades, que antes eran imposibles de tener en un marco de Javascript. Todos estos cambios, una vez implementados, seguramente serán fuente de inspiración para otros frameworks disponibles en el mercado. React 18 ha sido diseñado profesionalmente y se ve en línea con las mejores prácticas que se pueden utilizar.