¿Conoces las refs y el Dom en React? React es una librería JavaScript que ha creado sus propios elementos para simplificar la creación de interfaces de usuario. Sin embargo, sus métodos pueden llegar a ser restrictivos. Por ello, la misma librería ha creado alternativas para ejecutar aquellas acciones que no se pueden con el método React. En este post, te enseñaremos qué son y cómo se relacionan las refs y el DOM en React, un mecanismo que modifica la lógica de comunicación de esta librería.
¿Qué son las refs y el DOM en React?
Las refs, provenientes de la palabra referencia, son un mecanismo que le permite a React acceder a los hijos y a toda su API desde un componente padre. Esto cambia un poco la filosofía de React.
Como puedes leer en nuestro post sobre comunicar padres a hijos en React, esta librería solo tiene una manera de establecer comunicación entre los dos componentes familia: las props. Con las props, un componente padre puede pasar datos y funciones a un componente hijo. Sin embargo, no puede acceder a los datos internos que contiene dicho hijo. Entonces, por ejemplo, no puede saber el dato que tiene en su estado un componente hijo. Lo único que se puede es mandar un método que el hijo puede ejecutar y modificar, mandando el dato hacia arriba.
Entonces, React ha creado las refs, que nos permiten cambiar esta situación. En este sentido, el principal uso de las refs es permitirnos acceder directamente a los elementos del DOM. Una vez tenemos acceso a los elementos del DOM, tendremos acceso a todo su API. Además, nos ayudan a acceder a instancias de componentes.
¿Para qué sirve esto? Pues la relación entre las refs y el DOM en React es especialmente útil cuando queremos acceder a un dato de un componente hijo. Por ejemplo, acceder al elemento input de HTML que está dentro del componente hijo o a una instancia de una clase. Esto se debe a que con las refs tenemos acceso a toda la API del DOM, por lo que podremos ejecutar métodos de los distintos elementos HTML que insertamos en nuestro proyecto React.
Ten muy presente que no podemos pasar refs a un componente de tipo función, solo a un componente de tipo clase. Para conocer más sobre esta diferencia, te invitamos a leer nuestro post sobre componentes en React.
La relación entre las refs y el DOM en React es crucial, porque nos permite acceder a acciones que normalmente están fuera del alcance de esta librería JavaScript. Entre estas acciones se encuentra el manejo de foco, la selección de texto y la reproducción media. Además, este mecanismo nos permite lanzar animaciones imperativamente y ejecutar la integración de librerías de terceros de acceso a DOM.
Aunque las refs y el DOM en React pueden ser útiles para distintas acciones, no te recomendamos abusar de este mecanismo. En realidad, te sugerimos que todo lo que puedas hacer al modo React lo hagas al modo React.
Existen dos formas de crear una ref en React: por medio del comando createRef o por medio del hook useRef, que podemos inicializar con cualquier valor.
useRef (null);Lo normal es que guardemos este hook dentro de un objeto, al que llamamos con el nombre más útil para nuestro proyecto.
const textAreaRef = useRef (null);Para conocer más sobre este tema, te invitamos a leer el post sobre referencias y el DOM en reactjs.org.
Ahora que sabes qué son y cómo funcionan las refs y el DOM en React, te invitamos a seguir aprendiendo con nosotros sobre los conceptos de la programación para la web. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva e íntegra donde aprenderás la teoría y práctica del mundo del desarrollo web en pocos meses. ¿Te animas a darle un impulso a tu carrera? ¡Inscríbete ya!
