¿Cómo funciona el Virtual DOM?

El Virtual DOM es una representación en forma de objetos nativos de JavaScript de los elementos y componentes usados en nuestra UI con un formato muy similar al DOM nativo del navegador

¿Qué es?

const VDOM = {
  type: Hola,
  props: {
    text: 'Platzi',
    children: [
      {
        type: 'h1',
        props: {
          className: 'Title',
          children: 'Hola Platzi',
        },
      },
    ],
  },
};

Todos los componentes creados con React tienen la primera letra en mayúscula

Todos los elementos nativos de HTML en minúsculas

Algoritmo de diferencias

Diferente tipo de nodo

<div>
  <h1>hola</h1>
</div>

<section>
  <h1>hola</h1>
</section>

Actual

Nuevo

Propiedades de un nodo

<div
  id="actual"
/>

<div
  id="nuevo"
/>

Actual

Nuevo

Componentes  con estado

Los componentes tienen un método para saber si tienen que actualizarse o no

Conclusión