En el artículo anterior sobre la introducción a JSX , aprendimos que podemos usar JSX para almacenar marcas HTML dentro de variables de Javascript. Ahora, ReactJS es una biblioteca para crear interfaces de usuario activas, por lo que la representación es una de las partes integrales de ReactJS. React proporciona a los desarrolladores un paquete react-dom, también conocido como ReactDOM, para acceder y modificar el DOM. Veamos brevemente cuál es la necesidad de tener el paquete.
¿Qué es DOM?
DOM, abreviado como Document Object Model, es una representación lógica estándar de cualquier página web del World Wide Web Consortium. En palabras más sencillas, DOM es una estructura en forma de árbol que contiene todos los elementos y sus propiedades de un sitio web como sus Nodes. DOM proporciona una interfaz de idioma neutral que permite acceder y actualizar el contenido de cualquier elemento de una página web.
Antes de React, los desarrolladores manipulaban directamente los elementos DOM, lo que resultaba en una manipulación frecuente del DOM, y cada vez que se realizaba una actualización, el navegador tenía que recalcular y volver a pintar toda la vista de acuerdo con el CSS particular de la página, lo que hacía que el proceso total consumiera un mucho tiempo. Como mejora, React trajo a la escena el DOM virtual. Se puede hacer referencia al DOM virtual como una copia de la representación DOM real que se usa para contener las actualizaciones realizadas por el usuario y finalmente reflejarlo en el DOM del navegador original al mismo tiempo, lo que consume mucho menos tiempo.
¿Qué es ReactDOM?
ReactDOM es un paquete que proporciona métodos específicos de DOM que se pueden usar en el nivel superior de una aplicación web para permitir una forma eficiente de administrar los elementos DOM de la página web. ReactDOM proporciona a los desarrolladores una API que contiene los siguientes métodos y algunos más.
- prestar()
- encontrarDOMNode()
- desmontarComponenteEnNode()
- hidratar()
- crearPortal()
Requisito previo: para usar ReactDOM en cualquier aplicación web React, primero debemos importar ReactDOM desde el paquete react-dom usando el siguiente fragmento de código:
import ReactDOM from 'react-dom'
función render()
Este es uno de los métodos más importantes de ReactDOM. Esta función se usa para renderizar un solo componente de React o varios componentes envueltos juntos en un componente o un elemento div. Esta función utiliza los métodos eficientes de React para actualizar el DOM al poder cambiar solo un subárbol, métodos de diferencias eficientes, etc.
Sintaxis :
ReactDOM.render(element, container, callback)
Parámetros : Este método puede tomar un máximo de tres parámetros como se describe a continuación.
- elemento: este parámetro espera que se represente una expresión JSX o un elemento React.
- contenedor: este parámetro espera el contenedor en el que se debe representar el elemento.
- devolución de llamada: este es un parámetro opcional que espera una función que se ejecutará una vez que se complete el procesamiento.
Tipo de devolución: esta función devuelve una referencia al componente o un valor nulo si se representó un componente sin estado.
función findDOMNode()
Esta función generalmente se usa para obtener el Node DOM donde se representó un componente de React en particular. Este método se usa mucho menos, como se puede hacer a continuación agregando un atributo ref a cada componente en sí.
Sintaxis :
ReactDOM.findDOMNode(component)
Parámetros : este método toma un componente de parámetro único que espera que se busque un componente React en el DOM del navegador.
Tipo de devolución: esta función devuelve el Node DOM donde el componente se representó correctamente, de lo contrario, es nulo.
Función unmountComponentAtNode()
Esta función se usa para desmontar o eliminar el componente React que se representó en un contenedor en particular. Como ejemplo, puede pensar en un componente de notificación, después de un breve período de tiempo, es mejor eliminar el componente para que la página web sea más eficiente.
Sintaxis :
ReactDOM.unmountComponentAtNode(container)
Parámetros : este método toma un contenedor de parámetros único que espera el contenedor DOM del que se debe eliminar el componente React.
Tipo de devolución: esta función devuelve verdadero en caso de éxito, de lo contrario, falso.
función hidratar()
Este método es equivalente al método render() pero se implementa mientras se usa el renderizado del lado del servidor.
Sintaxis :
ReactDOM.hydrate(element, container, callback)
Parámetros : Este método puede tomar un máximo de tres parámetros como se describe a continuación.
- elemento: este parámetro espera que se represente una expresión JSX o un componente React.
- contenedor: este parámetro espera el contenedor en el que se debe representar el elemento.
- devolución de llamada: este es un parámetro opcional que espera una función que se ejecutará una vez que se complete el procesamiento.
Tipo de devolución: esta función intenta adjuntar detectores de eventos al marcado existente y devuelve una referencia al componente o un valor nulo si se representó un componente sin estado.
función crearPortal()
Por lo general, cuando se devuelve un elemento del método de representación de un componente, se monta en el DOM como un elemento secundario del Node principal más cercano, lo que en algunos casos puede no ser deseable. Los portales nos permiten representar un componente en un Node DOM que reside fuera de la jerarquía DOM actual del componente principal.
Sintaxis :
ReactDOM.createPortal(child, container)
Parámetros : Este método toma dos parámetros como se describe a continuación.
- child: este parámetro espera que se represente una expresión JSX o un componente React.
- contenedor: este parámetro espera el contenedor en el que se debe representar el elemento.
Tipo de devolución: esta función no devuelve nada.
Puntos importantes a tener en cuenta:
- ReactDOM.render() reemplaza al elemento secundario del contenedor dado, si corresponde. Utiliza un algoritmo diff altamente eficiente y puede modificar cualquier subárbol del DOM.
- La función findDOMNode() solo se puede implementar en componentes montados, por lo que los componentes funcionales no se pueden usar en el método findDOMNode().
- ReactDOM usa observables, por lo que proporciona una forma eficiente de manejar DOM.
- ReactDOM se puede usar tanto en el lado del cliente como en el lado del servidor.