En marzo de 2022, el equipo de React anunció el lanzamiento oficial de React 18. Esta versión vino con una serie de nuevas funciones orientadas a la mejora del rendimiento, basadas en el concepto de "representación concurrente". La idea detrás del renderizado concurrente es hacer que el proceso de renderizado al DOM sea interrumpible.
Entre las nuevas características hay cinco ganchos: useId, useTransition, useDerredValue, useSyncExternalStore y useInsertionEffect.
Gancho de transición de uso de reacción
De forma predeterminada, todas las actualizaciones de estado de React son urgentes. Las diferentes actualizaciones de estado en su aplicación compiten por los mismos recursos, lo que la ralentiza. El usoTransición Gancho de reacción resuelve este problema permitiéndole marcar algunas actualizaciones de estado como no urgentes. Esto permite que las actualizaciones de estado urgentes interrumpan aquellas con menor prioridad.
El componente SearchPage
Este sencillo programa imita un motor de búsqueda que actualiza dos estados: un campo de entrada y algunos resultados de búsqueda.
importar { estado de uso } de "reaccionar";
funciónPágina de búsqueda() {
const [entrada, establecerEntrada] = usarEstado("")
constante [lista, establecerLista] = usarEstado([]);constante listaTamaño = 30000
funciónmanejarCambiar(mi) {
establecer entrada(mi.objetivo.valor);
constante listaItems = [];por (dejar yo = 0; i < tamaño de lista; i++){
listaItems.empujar(mi.objetivo.valor);
}setList (elementos de la lista);
}devolver (
<división>
<etiqueta>Busca en la web: </label>
<tipo de entrada ="texto" valor={entrada} onChange={handleChange} />
{lista.map((elemento, índice) => {
devolver <clave div={índice}>{artículo}</div>
})}
</div>
);
}
exportardefecto BuscarPágina;
El componente de la aplicación actualizado
importar Página de búsqueda de "./Componentes/PáginaBúsqueda";funciónaplicación() {
devolver (
<división>
< Página de búsqueda/>
</div>
);
}
exportardefecto aplicación;
El código anterior representa una aplicación React con un campo de entrada:
A medida que comience a escribir caracteres en el campo, aparecerán a continuación 30 000 copias del texto escrito:
Si escribe varios caracteres en rápida sucesión, debería detectar un retraso. Afecta el tiempo que tardan los caracteres en aparecer tanto en el campo de entrada como en el "área de resultados de búsqueda". Esto se debe a que React ejecuta ambas actualizaciones de estado al mismo tiempo.
Si la demostración se ejecuta demasiado lenta o demasiado rápida para usted, intente ajustar la tamaño de lista valor en consecuencia.
Insertar el enlace useTransition en la aplicación le permitirá priorizar una actualización de estado sobre la otra.
Uso del gancho useTransition
importar {usarEstado, usarTransición} de "reaccionar";funciónPágina de búsqueda() {
constante [estáPendiente, iniciarTransición] = usarTransición();
const [entrada, establecerEntrada] = usarEstado("")
constante [lista, establecerLista] = usarEstado([]);constante listaTamaño = 30000
funciónmanejarCambiar(mi) {
establecer entrada(mi.objetivo.valor);
iniciarTransición(() => {
constante listaItems = [];por (dejar yo = 0; i < tamaño de lista; i++){
listaItems.empujar(mi.objetivo.valor);
}setList (elementos de la lista);
});
}devolver (
<división>
<etiqueta>Busca en la web: </label>
<tipo de entrada ="texto" valor={entrada} onChange={handleChange} />{¿pendiente? "...Cargando resultados": list.map((elemento, índice) => {
devolver <clave div={índice}>{artículo}</div>
})}
</div>
);
}
exportardefecto BuscarPágina;
Actualizando tu Página de búsqueda El componente con el código anterior priorizará el campo de entrada sobre el "área de resultados de búsqueda". Este simple cambio tiene un efecto claro: debería comenzar a ver el texto que escribe en el campo de entrada inmediatamente. Solo el "área de resultados de búsqueda" seguirá teniendo un ligero retraso. Esto se debe a la inicioTransicióninterfaz de programación de aplicaciones (API) del gancho useTransition.
El código que muestra los resultados de la búsqueda en la interfaz de usuario ahora usa el inicioTransición API. Esto permite que el campo de entrada interrumpa la actualización del estado de los resultados de búsqueda. Cuando el pendiente() La función muestra “…Resultado de carga”, indica que se está produciendo una transición (de un estado al siguiente).
Reaccionar useDeferredValue Gancho
El enlace useDeferredValue le permite aplazar la nueva representación de una actualización de estado no urgente. Al igual que el enlace useTransition, el enlace useDeferredValue es un enlace de simultaneidad. El gancho useDeferredValue permite que un estado mantenga su valor original mientras está en transición.
El componente SearchPage con el Hook useDeferredValue()
importar { useState, useTransition, useDeferredValue } de "reaccionar";funciónPágina de búsqueda() {
constante [,startTransition] = useTransition();
const [entrada, establecerEntrada] = usarEstado("")
constante [lista, establecerLista] = usarEstado([]);constante listaTamaño = 30000
funciónmanejarCambiar(mi) {
establecer entrada(mi.objetivo.valor);
iniciarTransición(() => {
constante listaItems = [];por (dejar yo = 0; i < tamaño de lista; i++){
listaItems.empujar(mi.objetivo.valor);
}setList (elementos de la lista);
});
}
constante deferredValue = useDeferredValue (entrada);
devolver (
<división>
<etiqueta>Busca en la web: </label>
<tipo de entrada ="texto" valor={entrada} onChange={handleChange} />{lista.map((elemento, índice) => {
devolver <clave div = {índice} entrada = {valor diferido} >{artículo}</div>
})}
</div>
);
}
exportardefecto BuscarPágina;
En el código de arriba verás que el pendiente() la función ya no existe. Esto se debe a que el valor diferido variable del gancho useDeferredValue reemplaza el pendiente() función durante la transición de estado. En lugar de que la lista de resultados de búsqueda se actualice cuando escribe un carácter nuevo, mantendrá sus valores anteriores hasta que la aplicación actualice el estado.
Gancho useSyncExternalStore de React
A diferencia de los ganchos useTransition y useDeferredValue que funcionan con el código de la aplicación, useSyncExternalStore funciona con bibliotecas. Permite que su aplicación React se suscriba y lea datos de bibliotecas externas. El hook useSyncExternalStore usa la siguiente declaración:
constante state = useSyncExternalStore (suscribirse, getSnapshot[, getServerSnapshot]);Esta firma contiene lo siguiente:
- estado: el valor del almacén de datos que devuelve el enlace useSyncExternalStore.
- suscribir: registra una devolución de llamada cuando cambia el almacén de datos.
- obtener instantánea: devuelve el valor actual del almacén de datos.
- getServerSnapshot: devuelve la instantánea utilizada durante la representación del servidor.
Con useSyncExternalStore, puede suscribirse a un almacén de datos completo o a un campo específico dentro de un almacén de datos.
Reaccionar useInsertionEffect Hook
El gancho useInsertionEffect es otro nuevo gancho de React que funciona con bibliotecas. Sin embargo, en lugar de almacenes de datos, el enlace useInsertionEffect funciona con bibliotecas CSS-in-JS. Este enlace aborda los problemas de rendimiento de representación de estilo. Le da estilo al DOM antes de leer el diseño en el gancho useLayoutEffect.
Gancho de useId de reacción
Usas el enlace useId en situaciones que requieren ID únicos (excepto claves en una lista). Su objetivo principal es generar ID que permanezcan únicos entre el cliente y el servidor, evitando el error de desajuste de hidratación del servidor React. El hook useId usa la siguiente declaración:
constante id = usarId()en la declaracion identificación es una cadena única que incluye el : ficha. Después de la declaración, puede pasar el identificación variable directamente al (los) elemento(s) que lo necesitan.
¿Qué valor agregan estos nuevos ganchos a React?
Los ganchos useTransition y useDeferredValue son ganchos de código de aplicación. A través de la representación de concurrencia, mejoran el rendimiento de las aplicaciones. El enlace useId aborda el error de desajuste de hidratación mediante la creación de ID únicos en el cliente y el servidor.
Los ganchos useSyncExternalStore y useInsertionEffect funcionan con bibliotecas externas para facilitar la representación simultánea. El gancho useInsertionEffect funciona con bibliotecas CSS-in-JS. El gancho useSyncExternalStore funciona con bibliotecas de almacenamiento de datos como la tienda Redux.
Juntos, estos ganchos dan un gran impulso al rendimiento, lo que a su vez mejora la experiencia del usuario.