Explicar los cheques sucios en React.js

React usa DOM virtual para representar el contenido. El DOM es una abstracción de la estructura HTML de una página. Toma los elementos y los envuelve en un objeto con una estructura de árbol. Esto proporciona una API que nos permite recorrer los Nodes del árbol y manipularlos, como agregar Nodes, eliminar Nodes o editar el contenido de un Node. DOM estaba destinado a IU estáticas, por lo tanto, cuando el DOM se actualiza, debe actualizar el Node y las páginas completas con su CSS y diseño correspondientes.

DOM vuelve a renderizar cada vez que hay un cambio en los datos y verifica los datos de dos maneras: 

  1. Comprobación sucia: comprueba los datos de cada Node a intervalos regulares para ver si ha habido algún cambio. La verificación sucia no es la solución óptima, ya que requiere atravesar cada Node de forma recursiva para asegurarse de que sus datos estén actualizados.
  2. Observable: cada componente es responsable de escuchar cuando se produce una actualización. Dado que los datos se guardan en el estado de los componentes, simplemente pueden escuchar los cambios y actualizarlos, si los hay.

React usa una técnica observable, mientras que la verificación sucia se usa en Angular.js.

React usa DOM virtual, que es una versión ligera del DOM. La única diferencia es la capacidad de escribir la pantalla como el DOM real; de hecho, se crea un nuevo DOM virtual después de cada renderizado.

Actualizaciones de DOM en React:

  • En la primera ejecución, se crean tanto el DOM virtual como el árbol DOM real
  • React funciona en patrones observables, por lo tanto, cada vez que hay un cambio en el estado, actualiza los Nodes en el DOM virtual.
  • Luego, reacciona compara el DOM virtual con el DOM real y actualiza los cambios. Este proceso se llama reconciliación .
  • Para la reconciliación, utiliza un algoritmo de diferenciación que en sí mismo es una verificación sucia, pero verifica los cambios en el DOM virtual en lugar de los datos en los Nodes DOM reales.

Publicación traducida automáticamente

Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *