Manipular el DOM con Refs

React actualiza automáticamente elDOMpara que coincida con tu resultado de renderizado, por lo que tus componentes no suelen necesitar manipularlo. Sin embargo, a veces podrías necesitar acceder a los elementos del DOM gestionados por React, por ejemplo, para enfocar un nodo, desplazarse hasta él o medir su tamaño y posición. No hay una forma incorporada de hacer esas cosas en React, por lo que necesitarás unarefal nodo del DOM.

Obtener una ref al nodo

Para acceder a un nodo del DOM gestionado por React, primero importa el HookuseRef:

Luego, úsalo para declarar una ref dentro de tu componente:

Finalmente, pasa tu ref como el atributorefa la etiqueta JSX para la cual quieres obtener el nodo del DOM:

El HookuseRefdevuelve un objeto con una única propiedad llamadacurrent. Inicialmente,myRef.currentseránull. Cuando React crea un nodo del DOM para este<div>, React colocará una referencia a este nodo enmyRef.current. Luego puedes acceder a este nodo del DOM desde tuscontroladores de eventosy usar lasAPI del navegadorintegradas definidas en él.

Ejemplo: Enfocar una entrada de texto

En este ejemplo, al hacer clic en el botón se enfocará la entrada:

Para implementar esto:

1. DeclarainputRefcon el HookuseRef.
2. Pásalo como<input ref={inputRef}>. Esto le dice a React quecoloque el nodo del DOM de este<input>eninputRef.current.
3. En la funciónhandleClick, lee el nodo del DOM de la entrada desdeinputRef.currenty llama afocus()en él coninputRef.current.focus().
4. Pasa el controlador de eventoshandleClickal<button>cononClick.

Si bien la manipulación del DOM es el caso de uso más común para las refs, el HookuseRefpuede usarse para almacenar otras cosas fuera de React, como IDs de temporizadores. De manera similar al estado, las refs persisten entre renderizados. Las refs son como variables de estado que no desencadenan re-renderizados cuando las estableces. Lee sobre las refs enReferenciar valores con Refs.

Ejemplo: Desplazarse a un elemento

Puedes tener más de una única ref en un componente. En este ejemplo, hay un carrusel de tres imágenes. Cada botón centra una imagen llamando al método del navegadorscrollIntoView()en el nodo del DOM correspondiente:

Acceder a los nodos DOM de otro componente

Puedes pasar refs de un componente padre a componentes hijoscomo cualquier otra prop.

En el ejemplo anterior, se crea una ref en el componente padre,MyForm, y se pasa al componente hijo,MyInput.MyInputluego pasa la ref a<input>. Debido a que<input>es uncomponente incorporado, React establece la propiedad.currentde la ref al elemento DOM<input>.

LainputRefcreada enMyFormahora apunta al elemento DOM<input>devuelto porMyInput. Un controlador de clics creado enMyFormpuede acceder ainputRefy llamar afocus()para establecer el foco en<input>.

Cuándo React adjunta las refs

En React, cada actualización se divide endos fases:

• Durante elrenderizado,React llama a tus componentes para determinar qué debe mostrarse en pantalla.
• Durante laconfirmación,React aplica los cambios al DOM.

En general,no querrásacceder a las refs durante el renderizado. Esto también aplica a las refs que contienen nodos DOM. Durante el primer renderizado, los nodos DOM aún no se han creado, por lo queref.currentseránull. Y durante el renderizado de actualizaciones, los nodos DOM aún no se han actualizado. Por lo tanto, es demasiado pronto para leerlos.

React estableceref.currentdurante la confirmación. Antes de actualizar el DOM, React establece los valores deref.currentafectados ennull. Después de actualizar el DOM, React los establece inmediatamente en los nodos DOM correspondientes.

Normalmente, accederás a las refs desde controladores de eventos.Si quieres hacer algo con una ref, pero no hay un evento particular para hacerlo, es posible que necesites un Efecto. Discutiremos los Efectos en las próximas páginas.

Buenas prácticas para la manipulación del DOM con refs

Las refs son una vía de escape. Solo deberías usarlas cuando tengas que "salirte de React". Ejemplos comunes de esto incluyen gestionar el foco, la posición de desplazamiento o llamar a APIs del navegador que React no expone.

Si te limitas a acciones no destructivas como enfocar y desplazar, no deberías encontrar problemas. Sin embargo, si intentasmodificarel DOM manualmente, corres el riesgo de entrar en conflicto con los cambios que React está haciendo.

Para ilustrar este problema, este ejemplo incluye un mensaje de bienvenida y dos botones. El primer botón alterna su presencia usandorenderizado condicional y estado, como harías normalmente en React. El segundo botón usa laAPI DOM remove()para eliminarlo por la fuerza del DOM fuera del control de React.

Prueba a pulsar "Alternar con setState" varias veces. El mensaje debería desaparecer y aparecer de nuevo. Luego pulsa "Eliminar del DOM". Esto lo eliminará por la fuerza. Finalmente, pulsa "Alternar con setState":

Después de haber eliminado manualmente el elemento del DOM, intentar usarsetStatepara mostrarlo de nuevo provocará un fallo. Esto se debe a que has cambiado el DOM y React no sabe cómo continuar gestionándolo correctamente.

Evita cambiar nodos del DOM gestionados por React.Modificar, añadir hijos o eliminar hijos de elementos que son gestionados por React puede llevar a resultados visuales inconsistentes o fallos como el anterior.

Sin embargo, esto no significa que no puedas hacerlo en absoluto. Requiere precaución.Puedes modificar de forma segura partes del DOM que React no tieneninguna razónpara actualizar.Por ejemplo, si algún<div>está siempre vacío en el JSX, React no tendrá razón para tocar su lista de hijos. Por lo tanto, es seguro añadir o eliminar elementos allí manualmente.

Recapitulación

• Las refs son un concepto genérico, pero la mayoría de las veces las usarás para contener elementos del DOM.
• Le indicas a React que coloque un nodo del DOM enmyRef.currentpasando<div ref={myRef}>.
• Normalmente, usarás refs para acciones no destructivas como enfocar, desplazar o medir elementos del DOM.
• Un componente no expone sus nodos del DOM por defecto. Puedes optar por exponer un nodo del DOM usando la propref.
• Evita cambiar nodos del DOM gestionados por React.
• Si modificas nodos del DOM gestionados por React, modifica partes que React no tiene razón para actualizar.