Estoy tratando de entender el uso de Ref en React. Vi un ejemplo en la documentación de Ant Design. https://3x.ant.design/components/tag/#components-tag-demo-control
Hay un código de una línea que no pude entender cómo funciona.
saveInputRef = input => (this.input = input);Y el uso de la siguiente manera:
<Input ref={this.saveInputRef} ...Pero en la documentación de React, se dice que creas una referencia usando el método React.createRef() .
https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element
¿Es una forma alternativa de usarlo? ¿Por qué no hay un método React.createRef()?
Hasta donde sé, hay 2 tipos diferentes de Refs, pero comúnmente se usan juntos.
A. Hay "Ref" creado por "createRef" (o "useRef" cuando se usan ganchos); Esto almacena un valor en la propiedad "actual" de la Ref. Este valor no causará reprocesamientos y se mantiene después de los reprocesamientos.
B. Y hay ref como una propiedad de los componentes integrados. Esta propiedad se utiliza para acceder al domnode.
Por lo general, ref (B) se almacena en una Ref (A)
Sin embargo, puede almacenar lo que quiera en la Ref (A). Y no es necesario que almacene necesariamente un nodo obtenido de la referencia (B) en una Referencia (A), también puede acceder a él directamente, que es lo que hace este fragmento de código:
<div ref={node => doSomething(node)}/>O simplemente
<div ref={doSomething}/>Esto se llama "referencia de devolución de llamada":
Referencias de devolución de llamada
React también es compatible con otra forma de establecer referencias llamada "referencias de devolución de llamada", lo que brinda un control más detallado sobre cuándo se configuran y desactivan las referencias.
En lugar de pasar un atributo ref creado por createRef(), pasa una función. La función recibe la instancia del componente React o el elemento HTML DOM como su argumento, que se puede almacenar y acceder desde cualquier otro lugar.
https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
EDITAR:
más sobre Ref (A) al usar ganchos.
Esencialmente, useRef es como una "caja" que puede contener un valor mutable en su propiedad .current.
Es posible que esté familiarizado con las referencias principalmente como una forma de acceder al DOM. Si pasa un objeto ref a React with , React establecerá su propiedad .current en el nodo DOM correspondiente siempre que ese nodo cambie.
Sin embargo, useRef() es útil para más que el atributo ref. Es útil para mantener cualquier valor mutable similar a cómo usaría los campos de instancia en las clases.
Esto funciona porque useRef() crea un objeto JavaScript simple. La única diferencia entre useRef() y crear un objeto {current: ...} es que useRef le dará el mismo objeto ref en cada renderizado.
Tenga en cuenta que useRef no le notifica cuando cambia su contenido. La mutación de la propiedad .current no provoca una nueva representación. Si desea ejecutar algún código cuando React adjunta o desconecta una referencia a un nodo DOM, es posible que desee utilizar una referencia de devolución de llamada en su lugar.