¿Y eso del Virtual DOM de React qué es?
Una introducción al Virtual DOM de React y la forma en que optimiza el pintado de las aplicaciones
Seguro que si has trabajado con React o has escuchado hablar algo de esta librería te suena el término “Virtual DOM”, ya que es uno de sus principales conceptos y la razón que le permite tener un rendimiento tan alto a la hora de actualizar el DOM. Por eso, he creído muy interesante preparar un artículo explicando qué es y la forma en que trabaja. ¡Vamos allá!
Real DOM
Pero antes de nada, si hay un Virtual DOM tendrá que haber algo real, ¿no? En efecto, el DOM (cuyas siglas son “Document Object Model) es la representación de la interfaz gráfica de nuestra aplicación. Por tanto, cada vez que el estado de la aplicación cambia, lo “esperable” es que también lo haga dicha interfaz para adaptarse a las modificaciones introducidas. Sin embargo, actualizar el DOM es una tarea costosa en cuanto a rendimiento se refiere, por lo que cuantos más cambios de estado sea necesario reflejar en él, más lento irá nuestra web.
¿Y por qué es tan lento realizar esos cambios?
EL DOM posee una estructura en forma de árbol:
