¿Cuál es el significado de las referencias en ReactJS?

En este artículo, vamos a aprender sobre la importancia de las referencias en React. Las referencias son una función proporcionada por React para acceder al elemento DOM y al elemento React que podría haber creado por su cuenta. Se utilizan en casos en los que queremos cambiar el valor de un componente secundario, sin hacer uso de accesorios y todo. También nos brindan una buena funcionalidad, ya que podemos usar devoluciones de llamada con ellos.  

Podemos crear una Ref por los siguientes tres métodos:

• Usando React.createRef()
• Usando el gancho useRef()
• Uso de referencia de devolución de llamada

Método 1: Usar React.createRef()

• Crea una variable ref usando React.createRef(). Fue introducido en la versión React 16.3.I.
• Adjunte la variable ref al elemento React usando el atributo ref del elemento.

Sintaxis: 

const func = React.createRef();

Método 2: Usando el gancho useRef()

No podemos usar el atributo ref en los componentes funcionales porque no tienen las instancias. Para usar la funcionalidad ref en el componente funcional podemos usar el gancho useRef.

• Crea una variable ref usando React.useRef()
• Adjunte la variable ref al elemento React usando el atributo ref del elemento.
• El beneficio de usar useRef() sobre createRef() es que es útil para mantener cualquier valor mutable similar a cómo usaría los campos de instancia en las clases.
• useRef() también toma un valor inicial.

Sintaxis:

const func = useRef(null);

Método 3: usar la referencia de devolución de llamada

 Este método se utilizó antes de la versión React 16.3. Entonces, si está usando React<16.3, usará este método. En este método, pasamos una función en lugar de pasar un atributo ref creado por createRef() o useRef(). La función recibe el elemento React o el elemento HTML DOM como argumento, que se puede utilizar.

Sintaxis:

let textInput = null;
 // Callback function that will set ref for input field
 const setTextInputRef = (element) => {
     textInputRef = element;
 };

Ejemplo: En este ejemplo, estamos usando el método ref by createRef para enfocar el elemento de entrada.

import * as React from 'react';
  
const App = () => {
  
  // Creating textInputRef variable
  const textInputRef = React.createRef();
  
  // This method will be used to focus textInput 
  // and give background color to textInput field
  const textInputFocusHandler = () => {
  
    // Focusing input element
    textInputRef.current.focus();
  
    // Giving background color to input element
    textInputRef.current.style.background = 'green';
  };
  
  return (
    <div>
      {/* Attaching ref variable using element's ref attribute */}
      <input ref={textInputRef} type="text" />
      {/* Attaching textInputFocusHandler method to button click */}
      <button onClick={textInputFocusHandler}>Focus</button>
    </div>
  );
};
  
export default App;

Producción:

Importancia de la referencia:

• Lograr Interacción: Logramos interacciones principalmente con props y estados en React. Pero a veces hay algunas interacciones que no se pueden lograr con accesorios y estados. En ese momento ref ayuda a lograrlos.
• Integración de bibliotecas DOM de terceros: cuando queremos integrar nuestra aplicación React con bibliotecas Dom de terceros, las referencias de React nos ayudan a hacerlo.
• Acceso a DOM: en React, un componente no puede usar directamente el DOM. Pero con Ref podemos hacerlo. Podemos acceder a cualquier elemento directamente y también podemos manipularlo. Algunos casos son el foco, selección de texto, etc.
• Activación de animación: las referencias de reacción nos ayudan a activar la animación imperativa en el DOM.
• Proporcione una buena funcionalidad: podemos usar la función de devolución de llamada con React ref.

Nota: Solo debemos usar Refs cuando sea realmente necesario. Debe evitarse hacer las cosas que se pueden hacer declarativamente.