¿Cómo Funciona React.Js?
React.js es una librería JavaScript desarrollada por Facebook. ¿Para qué nos sirve y cómo funciona?
React es una biblioteca escrita en JavaScript, desarrollada en Facebook para facilitar la creación de componentes interactivos, reutilizables, para interfaces de usuario. Se utiliza en Facebook para la producción de componentes, e Instagram está escrito enteramente en React. Uno de sus puntos más destacados, es que no sólo se utiliza en el lado del cliente, sino que también se puede representar en el servidor, y trabajar juntos.
¿Cómo funciona React?
React.js está construido de forma para a hacer funciones, que obtienen las actualizaciones de estado de la página y que se traduzcan en una representación virtual de la página resultante. Siempre que React es informado de un cambio de estado, vuelve a ejecutar esas funciones para determinar una nueva representación virtual de la página, a continuación, se traduce automáticamente ese resultado en los cambios del DOM necesarios para reflejar la nueva presentación de la página.
A primera vista, esto suena como que fuera más lento que el enfoque JavaScript habitual de actualización de cada elemento, según sea necesario. Detrás de escena, sin embargo, React.js hace justamente eso: tiene un algoritmo muy eficiente para determinar las diferencias entre la representación virtual de la página actual y la nueva. A partir de esas diferencias, hace el conjunto mínimo de cambios necesarios en el DOM.
Pues utiliza un concepto llamado el Virtual DOM que hace selectivamente sub-árboles de los nodos sobre la base de cambios de estado, desarrollando esto, con la menor cantidad de manipulación DOM posible, con el fin de mantener los componentes actualizados, estructurando sus datos.
¿Cómo funciona el Virtual DOM o DOM Virtual?
Imagina que tienes un objeto que es un modeló en torno a una persona. Tienes todas las propiedades relevantes de una persona que podría tener, y refleja el estado actual de la persona. Esto es básicamente lo que React hace con el DOM.
Ahora piensa, si obtenemos ese objeto y le hacemos algunos cambios. Se ha añadido un color de pelo, una barba y otros cambios. En React, cuando aplicamos estos cambios, ocurren dos cosas:
– En primer lugar, React ejecuta un algoritmo de “diffing”, que identifica lo que ha cambiado todo en el Virtual DOM.
– El segundo paso es la reconciliación, donde se actualiza el DOM con los resultados de diff.
La que hace React, ante estos cambios, en lugar de tomar a la persona real y reconstruirla desde cero, solo cambiaría la cabeza. Esto significa que si usted tenía el texto en una entrada y una actualización se llevó a cabo, siempre y cuando nodo padre de la entrada no estaba programado para la actualización, el texto se quedaría sin ser cambiado.
Es así como React, está siendo tan popular, llegando a ser uno de lo más usado. Si deseas empezar a aprender a utilizar React, te invitó a que entres en mi curso de React JS Hooks: De Cero a Experto Creado Aplicaciones Reales.
