¿Qué son las React Refs y para que sirven? Uso de las Refs y manejo del DOM en React.js

¿Qué aprenderás de las Refs?

• ¿Qué son las Refs?
• Manejo de Refs en componentes de clases (Class Components)
• Manejo de Refs en componentes funcionales (Functional Components)
• Como utilizarlas con librerías de terceros, en este caso con la librería Chart.JS, la cual ya hemos manejado en Gráficas con MySQL y PHP, el cual te recomiendo también que lo veas.

Repositorio:

• Puedes descargar el código dando clic aquí.
• O clonando el repositorio que se encuentra en GitHub y solo tienes que cambiarte a la rama "refs", te dejo los comandos.

 

git clone https://github.com/EWebik/react-js.git
git checkout refs

 

¿Qué son las Refs en React?

Las Refs son la manera correcta en la que podemos acceder o crear referencias a los elementos de nuestros componentes montados en la DOM.

Quizá en tus aplicaciones en React haz utilizado.

document.getElementById()

Pues en lo personal en programación no me gusta decir si algo esta bien o esta mal, o si sirve o no.

Yo lo cambio por, "esta puede ser una mejor opción", ya que React nos proporciona una forma nativa, la cual es utilizar.

React.createRef()

La instrucción anterior nos permite crear una referencia dentro de la biblioteca de React con la cual podemos acceder a los elementos que se encuentran montados en la DOM.

Por lo tanto, document.getElementById() y React.createRef() son equivalente, no obstante, la segunda es la que indica React que debemos utilizar.

 

¿Cuándo debemos usar Refs?

Pues hay bastantes casos en que puedes utilizar las Refs, sin embargo, la librería nos expone 3 casos particulares:

• Si deseas controlar el enfoque de elementos, selección de textos o en la reproducción de medios.
• Para la activación de animaciones
• Y la más común es la integración con bibliotecas de DOM de terceros.

A pesar de que con Refs podrás hacer muchas cosas, te recomiendo que no exageres en su uso, ya que estoy seguro de que podrás reemplazarlas con algo declarativo, es decir, con el uso de State.

 

¿Cómo crear referencias en componentes de clases? React.createRef

Existen dos formas de crear una Refs en un componente de clase, y puede ser dentro del constructor o fuera de el, por ejemplo:

  constructor(props){
    super(props);
    this.referencia = React.createRef();
    ...
 }

Fuera del constructor

class Componente extends React.Component{
         referencia = React.createRef();
         ....
}

 

Agregando las Refs a nuestro JSX

Una vez declarada nuestra referencia debemos asignarla a un elemento, el cual puede ser cualquier tag HTML, por ejemplo, en el vídeo utilizamos un H1.

class Componente extends React.Component{
....
  render(){
    return(
      <div>
        <h1 ref={this.referencia}>Curso de React JS by EWebik</h1>
      </div>
    );
  }
}

 

Modificando la DOM mediante Refs

Bien en este punto ya se tiene conectado un elemento como lo es H1 con React, ahora podemos utilizar el método de ciclo de vida componentDidMount para modificar la DOM a través de la referencia creada.

class Componente extends React.Component{
...
  componentDidMount(){   
    let contador = 0;
    let strMensaje = "";
    let mensaje = this.state.mensaje;

    setInterval(()=>{
      strMensaje += mensaje[contador];
      this.referencia.current.innerText = strMensaje;
      contador++;
      if(contador >= mensaje.length){
        strMensaje="";
        contador=0;
      }
    },200);
  }
...
}

En el código anterior modificamos el texto del H1 haciendo que cada letra aparezca cada 200 milisegundos.

Aquí te dejo el código completo para que lo analices

import React,{useState, useRef} from 'react';
import ReactDOM from 'react-dom';


//Refs React en componentes de clases
class Componente extends React.Component{

  constructor(props){
    super(props);
    this.referencia = React.createRef();
    this.state ={
     mensaje: ["C","u","r","s","o"," ","d","e"," ","R","e","a","c","t"," ","J","S"," ","b","y"," ","E","W","e","b","i","k"]
    }
  }
  componentDidMount(){  
    let contador = 0;
    let strMensaje = "";
    let mensaje = this.state.mensaje;

    setInterval(()=>{
      strMensaje += mensaje[contador];
      this.referencia.current.innerText = strMensaje;
      contador++;
      if(contador >= mensaje.length){
        strMensaje="";
        contador=0;
      }
    },200);
  }

  render(){
    return(
      <div>
        <h1 ref={this.referencia}>Curso de React JS by EWebik</h1>
      </div>
    );
  }
}

ReactDOM.render(
    <Componente />,
  document.getElementById('root')
);

 

Refs en componentes funcionales useRef

Bien ahora para utilizar referencias en componentes funcionales debemos utilizar un Hook, no explicare que son los Hooks en este momento ya que tendremos una clase dedicada a este tema, por el memento solo veremos el Hook useRef el cual permite manejar referencias en functional component.

 

Declaración de useRef

Dentro de tu componente solo basta con crear una variable o constante que se iguala a useRef().

function Componente(){
...
const referencia = useRef();
...
}

Esto es equivalente a utilizar this.referencia = React.createRef();

Ahora para hacer el mismo efecto y funcionalidad que en componente de clase necesitamos agregar un state y unas cuantas variables más de control, por ejemplo, aquí te dejo el código completo del componente.

//Refs React en componentes funcionales
function Componente1(){
  const [ini, setIni] = useState(true);
  const [state, setState] = useState({
    mensaje: ["C","u","r","s","o"," ","d","e"," ","R","e","a","c","t"," ","J","S"," ","b","y"," ","E","W","e","b","i","k"]
   });

   const referencia = useRef();

   const animacion = ()=>{
      let contador = 0;
      let strMensaje = "";
      let mensaje = state.mensaje;

      setInterval(()=>{
        strMensaje += mensaje[contador];
        referencia.current.innerText = strMensaje;
        contador++;
        if(contador >= mensaje.length){
          strMensaje="";
          contador=0;
        }
      },100);
   }

   if(ini){
     setIni(false);
     animacion();
   }

   return(
    <div>
      <h1 ref={referencia}>Curso de React JS by EWebik</h1>
    </div>
  );
}

 

Ya que no hemos visto más Hooks, limitamos la ejecución de la función animación, a través de una variable de estado.

Te recomiendo ver el vídeo para ver ambos ejemplos en acción ya que quizá en este post no se alcanza a comprender perfectamente el funcionamiento.

 

Refs en React con librería de terceros

Existen muchas librerías que no precisamente están homologadas con React y que requieren una referencia directa a la DOM, aquí tenemos un buen ejemplo de cuando debemos usar las Refs.

Aquí te dejo un ejemplo utilizando la librería Chart.js, la cual nos permite crear gráficas de una forma bastante fácil.

//Refs React y librerías de terceros
class Componente extends React.Component{
  
  constructor(props){
    super(props);
    this.referencia = React.createRef();
  }
  componentDidMount(){
    var ctx = this.referencia.current.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
    });
  }

  render(){
    return(
      <div>
        <h1 ref={this.referencia}>
          Curso de React JS by EWebik
        </h1>
        <canvas id="myChart"
         ref={this.referencia}
         style={{width:400, height:400}}></canvas>
      </div>
    );
  }
}

 

Espero que te este gustando este curso de React, por favor ayúdame compartiendo en redes sociales para llegar a más gente que no cuente con la posibilidad de pagar un curso de esta índole. Nos vemos en el siguiente capítulo.