Saltar al contenido

Virtual DOM – el creador de diferencias en React JS

Cualquier llamada al método render() creará un árbol de elementos React. Si el estado cambia y se vuelve a invocar al método render(), devolverá un árbol diferente de elementos React. Ahora, el reto es actualizar efectivamente la interfaz de usuario para que coincida con el árbol recién generado. Para un árbol con $0027n$0027 número de elementos, la complejidad es del orden de O(n3). React implementa un algoritmo optimizado de O(n) basado en dos supuestos:

  1. Elementos de diferentes tipos producirán diferentes estructuras de árbol.

Si los elementos de la raíz tienen diferentes tipos, React sustituirá los elementos del árbol viejo por el nuevo. Si dos elementos de React tienen el mismo tipo, comparará los atributos y actualizará sólo los atributos modificados. Veamos un simple componente de React que imprime “I love ReactJS”. Si cambiamos la etiqueta por otra, todos los componentes bajo la etiqueta serán desmontados y su estado será destruido. En cambio, si sólo cambiamos el atributo “className” en la etiqueta, React mantendrá el mismo nodo DOM y cambiará sólo el atributo.

Virtual DOM – el creador de diferencias en React JS
Virtual DOM – el creador de diferencias en React JS
12345678910111213classHelloextendsReact.component{render(){return(<divclassName="test1"<Hello/ </div>)}}functionHello(){return<h1};I love ReactJS</h1>;}

jsx

  1. Usando un accesorio clave para insinuar los elementos infantiles que pueden ser estables a través de diferentes renders.

Mientras genera la diferencia entre el DOM virtual sucio y prístino, React sólo itera sobre ambos árboles paralelamente y genera una mutación cuando encuentra una diferencia. Así, si el desarrollador puede insinuar a React utilizando el atributo de la clave para identificar un elemento, React utilizará esta clave para hacer coincidir los elementos entre dos árboles y minimizar las mutaciones innecesarias.