¿Estás pensando en probar la codificación con React? Estas son las nuevas funciones clave para probar en React 18.

React es una biblioteca JavaScript de código abierto muy popular creada por Facebook en 2013. Debido a su flexibilidad, muchos desarrolladores aprovechan algunas de sus funciones para crear componentes de interfaz de usuario (UI) rápidos, eficientes y reutilizables.

En marzo de 2022, el equipo lanzó la versión más reciente y anticipada de la biblioteca React, React 18, que incluye nuevas funciones que se enfocan en mejorar el rendimiento de la aplicación.

Las nuevas características en React 18

React 18 consta de algunas características nuevas y útiles agregadas al biblioteca JavaScript de código abierto. Muchos de estos cambios no estaban en la versión anterior, mientras que otras características se mejoraron. Algunas de estas características incluyen; una nueva API raíz, procesamiento por lotes automático, API de transición, API de suspensión y el lanzamiento de nuevos ganchos.

instagram viewer

Nueva API raíz

La API raíz en React realiza un seguimiento de cómo se representa el componente de nivel superior en el árbol. En las versiones anteriores de React, el prestar El método se utilizó para ejecutar el renderizado, que ahora se denomina API raíz heredada.

Sin embargo, React 18 viene con una nueva API raíz que crea una raíz usando el crear raíz y luego renderiza un componente React a la raíz creada usando el prestar método.

Esta nueva API raíz le dará acceso a las funciones de esta versión reciente, como la función API de transición que se analiza más adelante. Si bien la forma anterior seguirá funcionando en React 18, es posible que se elimine gradualmente en el futuro.

El fragmento a continuación muestra cómo la API raíz está estructurada tanto en la forma heredada como en la nueva.

API raíz heredada

importar ReactDOM de'reaccionar-dom';
importar aplicación de'./Aplicación';
ReactDOM.render(<aplicación />, documento.getElementById('aplicación'))

Nueva API raíz

importar ReactDOM de'reaccionar-dom/cliente';
importar aplicación de'./Aplicación';
constante root = ReactDOM.createRoot(documento.getElementById('aplicación'));
root.render(<aplicación />)

Dosificación automática

El procesamiento por lotes en React implica múltiples actualizaciones de estado en una sola representación en cada evento del navegador, por ejemplo, un haga clic en evento. Cualquier cambio de estado que haya ocurrido fuera de un evento, como una promesa o una devolución de llamada, no se procesará por lotes.

Con React 18, las actualizaciones de estado de procesamiento por lotes se realizan automáticamente, independientemente de dónde ocurran estas actualizaciones. Esta característica proporciona una mejora inmediata en el rendimiento y el tiempo de renderizado. Sin embargo, si tiene un estado de componente que no desea que se lote, puede optar por no hacerlo usando el ruborSync método. A continuación se muestra un fragmento de muestra sobre cómo se puede hacer;

importar { sincronización al ras } de'reaccionar-dom';
funciónhandleClick() {
 flushSync(() => {
 establecerCuenta(contar => contar + 1);
]});
 flushSync(() => {
 establecerTienda(almacenar => !almacenar);
});
}

API de transición

En React, las actualizaciones realizadas en la interfaz de usuario se pueden clasificar como urgentes y las actualizaciones de transición también se denominan no urgentes. Un ejemplo de una actualización urgente puede ser el caso de ingresar un texto en un campo, mientras que una actualización de transición podría ser una función de filtrado de búsqueda.

Ahora, si dichas actualizaciones ocurren simultáneamente, esto podría denominarse una operación pesada y podría provocar la congelación de su aplicación. Para resolver este problema, aquí es donde la API de transición llamó al inicioTransición viene a jugar Esta nueva función le dice a React qué actualizaciones deben marcarse como "transiciones" y, a su vez, mejora las interacciones del usuario. Aquí hay una muestra de código de cómo funciona;

importar { iniciarTransición } de"reaccionar";
startTransition(() => {
 setSearch (entrada);
});

Suspenso

Cuando una aplicación se procesa en el servidor, se devuelve un archivo HTML estático al navegador que permite al usuario ver cómo se ve la aplicación mientras se carga JavaScript. Cuando se carga el archivo, el HTML se vuelve dinámico con lo que se conoce como hidratación. El problema aquí es que, si no se implementan todos estos elementos, su aplicación no se volvería interactiva.

Para resolver este problema, React 18 proporciona dos nuevas funciones de representación del lado del servidor (SSR) utilizando el Suspenso componente;

  • La transmisión de HTML permite que se envíen partes de un componente a medida que se procesan.
  • La hidratación selectiva prioriza la interactividad de los componentes seleccionados por un usuario.

Nuevos ganchos

Un gran punto de inflexión para React fue la introducción de ganchos en reaccionar versión 16 que permite que los componentes de función accedan a estados y otras características de React sin escribir clases. El React 18 se envía con cinco nuevos ganchos para mejorar la experiencia de los desarrolladores;

  • useId: Este gancho nos permite crear un identificador único (ID) en nuestra aplicación tanto en el servidor como en el cliente.
  • useTransition: se usa junto con inicioTransición para crear una nueva actualización de estado que puede denominarse no urgente.
  • useDefferedValue: Permite diferir actualizaciones menos urgentes.
  • useSyncExternalStore: este enlace es útil cuando se implementan suscripciones a fuentes de datos externas.
  • useInsertionEffect: este enlace está limitado a los autores de la biblioteca CSS-in-JS para inyectar estilos en el DOM.

Cómo actualizar a React 18

Para realizar una actualización, se puede usar el administrador de paquetes npm o yarn ejecutando el siguiente comando en la terminal.

npm instalar reaccionar reaccionar-dom

o

añadir hilo reaccionar reaccionar-dom

Luego, deberá realizar un cambio en el índice.js archivo en el directorio raíz de la carpeta del proyecto de la API heredada a la nueva API raíz como se muestra anteriormente.

Cómo configurar un nuevo proyecto de React 18

Para configurar un nuevo proyecto React 18, el paquete create-react-app se instala con npm o yarn en la terminal;

npx crear-react-app mi-react-app

o

añadir hilo crear-react-app mi-react-app

Mejore el rendimiento de su aplicación con React 18

Ahora conoce algunas funciones nuevas en React 18, como la nueva API raíz, Suspense, Transition o Automatic Batching, y cómo actualizar a esta nueva versión y configurarla desde cero.

Estos cambios recientes en React están listos para que los experimente ahora mismo.