DOM, Virtual DOM y React DOM
Clase 2 de 29 • Curso Práctico de React JS 2019
Contenido del curso
Crear una Aplicación con React JS
- 3
Create React App y Tipos de Componentes
13:04 min - 4
JSX: JavaScript + HTML
10:14 min - 5
Props: Comunicación entre Componentes
04:56 min - 6
¿Qué son los métodos del ciclo vida?
02:36 min - 7
State - Events
07:01 min - 8
Instalación y configuración de entorno
06:29 min - 9
Agregando compatibilidad con todos los navegadores usando Babel
08:57 min
Configurar un entorno de trabajo profesional
Llevar un diseño de HTML y CSS a React
- 15
Estructura del Header
09:17 min - 16
Estilos del Header
03:55 min - 17
Estructura y Estilos del Buscador
03:19 min - 18
Estructura y Estilos de Carousel y Carousel Item
12:53 min - 19
Estructura y Estilos del Footer
03:37 min - 20
Añadiendo imágenes con Webpack
11:22 min - 21
Imports, Variables y Fuentes de Google en Sass
05:39 min
Uso de una API de desarrollo (Fake API)
Usar React Tools
Resumen
El DOM es el código HTML que se transforma en páginas web.
Cada vez que cambiamos alguna parte del DOM, también estamos actualizando el HTML con el que interactúan nuestros usuarios. El problema es que todas las operaciones, comparaciones y actualizaciones en el DOM son muy costosas.
El Virtual DOM es una herramienta que usan tecnologías como React y Vue para mejorar el rendimiento (performance) y velocidad de nuestras aplicaciones.
Es una copia exacta del DOM, pero mucho más ligera, ya que los cambios no actualizan el verdadero HTML de nuestras páginas web. Gracias al Virtual DOM podemos hacer operaciones y comparaciones de forma sumamente rápida.
Recuerda que los cambios en el Virtual DOM no afectan el HTML que ven los usuarios, así que debemos estar sincronizando constantemente las copias con el DOM. Pero no te preocupes, React DOM lo hace por nosotros.