Lanzamiento de la versión oficial de React18

Lanzamiento de la versión oficial de React18

Todavía estaba mirando el código fuente hace unos días, quería decir que intentaría ver las características de React18, no esperaba que saliera la versión oficial hoy:

Ahora eche un vistazo a las nuevas funciones de React18 basadas en la publicación de blog publicada por el equipo de React: React v18.0 .

Concurrente

De hecho, cuando ejecuté el código fuente antes, me di cuenta visualmente de que React18 realmente había entrado en la era de la concurrencia. Aquí está la representación de la versión v17:

Compare la representación de Reactv18:

Se puede ver que en comparación con v18, en la parte del código React que se ejecuta (es decir, el segmento de código rosa), v18 ejecuta 2 tareas, mientras que v17 moviliza 1 tarea. ¿Qué sucedió exactamente? Después de eso, realmente necesito profundizar en el código fuente y ver qué tipo de descaro están haciendo los dioses.

Se interrumpirá el renderizado.

Si bien la documentación deja en claro que los desarrolladores no necesitan saber lo que están haciendo debajo del capó (detrás de escena), una advertencia es que el renderizado puede interrumpirse. Lo siguiente es del texto original:

Con el renderizado síncrono, una vez que una actualización comienza a renderizarse, nada puede interrumpirla hasta que el usuario pueda ver el resultado en la pantalla.

En un renderizado simultáneo, este no es siempre el caso. React puede comenzar a generar una actualización, hacer una pausa en el medio y luego continuar más tarde. Incluso puede abandonar por completo un renderizado en curso.

Es decir, cuando se renderiza sincrónicamente, una vez que una actualización (de estado o accesorios) activa el renderizado, no se puede interrumpir hasta que el usuario vea la interfaz de usuario renderizada nuevamente. Pero en el modo concurrente, React puede desencadenar una actualización, detenerse, reanudarse más tarde o puede dejar todo el trabajo de obsolescencia a la mitad.

Por supuesto, React garantizará la consistencia de la representación y el estado internamente, así que... será bueno profundizar más tarde.

El estado se puede reutilizar

Las caricias de estado mencionadas aquí se refieren a:

Otro ejemplo es el estado reutilizable. Concurrent React puede eliminar secciones de la interfaz de usuario de la pantalla y luego volver a agregarlas más tarde mientras se reutiliza el estado anterior. Por ejemplo, cuando un usuario se aleja de una pantalla y retrocede, React debería poder restaurar la pantalla anterior en el mismo estado en el que estaba antes.

Es decir, cuando parte de la interfaz de usuario se elimina y se vuelve a agregar, React puede reutilizar el estado anterior. El ejemplo aquí es que cuando el usuario hace clic fuera de la página y luego salta hacia atrás, React debería poder restaurar la página en el mismo estado.

Mi entendimiento personal es que cuando abandona la página actual y vuelve a la página anterior, el estado de React se puede restaurar, en lugar de perderse por completo como antes, y la página se procesa desde el estado inicial.

Si mi comprensión es correcta, sin un estado persistente, puede escribir mucho menos código Redux.

Disponible en DataFrame Suspense

El suspenso es una característica nueva en las pruebas y hace lo siguiente:

Reaccionar.Suspenso

React.SuspenseSe puede especificar un indicador de carga en caso de que algunos de sus componentes secundarios en el árbol de componentes aún no estén listos para renderizarse. Actualmente, los componentes de carga diferida son el único caso de uso <React.Suspense>admitido :

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
     
     
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={
     
     <Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Según el contenido de la publicación del blog:

En React 18, puede comenzar a usar Suspense para la obtención de datos en marcos obstinados como Relay, Next.js, Hydrogen o Remix. La obtención de datos ad hoc con Suspense es técnicamente posible, pero aún no se recomienda como estrategia general.

Probablemente signifique que finalmente puede usar la API integrada de React para esperar a que se obtengan los datos antes de mostrar la página.

En otras palabras, ¿puede escribir mucho menos código Redux-Saga?

El componente del servidor todavía está en desarrollo.

Server Components también es un nuevo componente actualmente en desarrollo.

Después de eso, ¿debería ser posible usar directamente la API integrada de React para la representación del lado del servidor sin Next.js?

Novedades en React18

Actualización de estado automática

Antes de v18, la actualización por lotes se realizaba en los detectores de eventos React, y los detectores de eventos originales de Promise, setTimeout y JavaScript no empaquetaban actualizaciones, pero v18 escuchará automáticamente estos eventos y empaquetará actualizaciones automáticamente para mejorar el rendimiento.

Transiciones

Esta es una característica nueva, el objetivo principal es distinguir entre actualizaciones urgentes (actualizaciones urgentes) y actualizaciones no urgentes (actualizaciones no urgentes) .

La diferencia entre los dos es que las actualizaciones urgentes son cuando el usuario activa un evento y espera recibir comentarios inmediatos, como un clic, una entrada, etc. Las actualizaciones no urgentes (también conocidas como actualizaciones de transición) son como transiciones de interfaz de usuario, etc.

Entonces, aquí hay nuevos enlaces, los desarrolladores pueden decirle a React qué actualización es una actualización urgente (actualizaciones urgentes) , de modo que una vez que cambie el estado, la actualización urgente (actualizaciones urgentes) puede restablecer el contenido de la actualización urgente (actualizaciones urgentes).

Suspenso

Se mencionó brevemente antes, aquí hay un ejemplo de código:

<Suspense fallback={
    
    <Spinner />}>
  <Comments />
</Suspense>

Mientras Commentaún cargando, se Spinnerrenderizará... Todavía tiene que entregar un ejemplo para entender cómo usarlo.

Nueva API de representación de cliente a servidor

El cliente tiene dos API nuevas, ambas react-dom/clientexportadas para react-domreemplazar la API de:

• createRootreemplazará ReactDOM.render_
• hydrateRootreemplazaráReactDOM.hydrate

El servidor también tiene una nueva API, muy probablemente para calentar el SSR más tarde:

• renderToPipeableStream, que se puede transmitir desde un entorno de nodo
• renderToReadableStream, trabaja en los trabajadores de Deno y Cloudflare

Nuevo comportamiento del modo estricto

todavía en la planificación

ganchos nuevos

Hay cinco:

• useId

  Se utiliza para generar ID únicos en el servidor y el cliente, y también para resolver el problema de los ID duplicados en bibliotecas de terceros. La dirección del documento es: https://reactjs.org/docs/hooks-reference.html#useid

• useTransition

  Como se mencionó anteriormente, aparecerán nuevas API correspondientes a nuevas funciones, y la dirección del documento actual es 404...

• useDeferredValue

  API para aplazar la re-renderización, la renderización retrasada se puede interrumpir (comprenda la parte donde la renderización se puede interrumpir arriba), la dirección de la documentación es: https://reactjs.org/docs/hooks-reference.html#usedeferredvalue

• useSyncExternalStore

  Este enlace está diseñado para bibliotecas de terceros, no para código de software. La dirección específica del documento: https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore

• useInsertionEffect
  Este enlace está diseñado para bibliotecas de terceros, no para código de software. La dirección específica del documento: https://reactjs.org/docs/hooks-reference.html#useinsertioneffect

La mayoría de los nuevos ganchos aún se encuentran en una etapa de comprensión vaga, y es mejor tomarse el tiempo para escribir un ejemplo para una comprensión más profunda.