Día 2: Cómo React actualiza la interfaz de usuario (UI)

Ayer aprendí qué hace React. Hoy aprendí cómo lo hace.

Solía preguntarme cómo sabe React exactamente qué cambiar en la UI. Si cambias una palabra en un párrafo, ¿reconstruye React toda la página? No. Utiliza un proceso inteligente para mantenerse rápido.

Aquí tienes el desglose del ciclo de actualización de React.

Reconciliation y Diffing

La reconciliación es la estrategia. El diffing es el método real. React compara el nuevo árbol del Virtual DOM con el anterior.

Comparar dos árboles es difícil para las computadoras. Un algoritmo estándar es demasiado lento. React se mantiene rápido basándose en dos suposiciones:

  • Si el tipo de un elemento cambia, React destruye el árbol antiguo y construye uno nuevo.
  • Si el tipo se mantiene igual, React solo actualiza los atributos que han cambiado.

Esto permite que React se ejecute en tiempo O(n). Esto hace que las actualizaciones se sientan instantáneas.

Las dos fases

React divide su trabajo en dos pasos distintos:

  1. Render Phase Esta es la etapa de planificación. React llama a tus componentes y calcula los cambios. Aquí no toca el Real DOM. Piénsalo como un arquitecto dibujando un plano.

  2. Commit Phase Esta es la etapa de construcción. React aplica los cambios calculados al Real DOM. Esta parte es síncrona. Una vez que comienza, no se detiene hasta que el trabajo termina.

Importante: React actualiza el DOM, pero el navegador pinta los píxeles. React se encarga de la estructura. El navegador se encarga del renderizado visual.

React Fiber

Antes de React 16, el renderizado era síncrono. Si un renderizado tardaba mucho tiempo, el navegador se congelaba. No podías desplazarte ni escribir.

Fiber cambió esto. Fiber es el motor que gestiona la Render Phase. Permite que React pueda:

  • Pausar el trabajo y retomarlo más tarde.
  • Priorizar actualizaciones urgentes, como lo que el usuario escribe, sobre los datos en segundo plano.
  • Dividir el trabajo en pequeños fragmentos.

El Virtual DOM es la estructura de datos. Fiber es el algoritmo que opera sobre esos datos.

Resumen del flujo:

• El estado cambia. • Render Phase: React planifica los cambios mediante Diffing. • Commit Phase: React actualiza el Real DOM. • Navegador: Layout, Paint y Composite. • Los píxeles aparecen en la pantalla.

Fuente: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f