Veo que React.forwardRef parece ser la forma autorizada de pasar una referencia a un componente funcional secundario, de los documentos de reacción:
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>;Sin embargo, ¿cuál es la ventaja de hacer esto en lugar de simplemente pasar un accesorio personalizado?:
const FancyButton = ({ innerRef }) => ( <button ref={innerRef} className="FancyButton"> {props.children} </button> )); const ref = React.createRef(); <FancyButton innerRef={ref}>Click me!</FancyButton>; La única ventaja que se me ocurre es tener una API consistente para las referencias, pero ¿hay alguna otra ventaja? ¿Pasar un accesorio personalizado afecta la diferenciación cuando se trata de renderizar y causa renderizados adicionales, seguramente no ya que la referencia se almacena como estado mutable en el campo current ?
Digamos, por ejemplo, que desea pasar varias referencias (que, tbh, podría indicar olor a código, pero aún así), entonces la única solución que puedo ver sería usar accesorios customRef.
Supongo que mi pregunta es ¿cuál es el valor de usar forwardRef sobre un accesorio personalizado?
Incluso los documentos de React mencionan el accesorio de referencia personalizado como un enfoque más flexible para forwardRef :
Si usa React 16.2 o anterior, o si necesita más flexibilidad que la proporcionada por el reenvío de referencias , puede usar este enfoque alternativo y pasar explícitamente una referencia como un accesorio con un nombre diferente .
También hay una esencia , en la que Dan Abramov escribe sobre sus ventajas:
Agregaría que pasar las referencias como accesorios habituales no provoca cambios importantes y es el camino a seguir para varias referencias. Las únicas ventajas de forwardRef que me vienen a la mente son:
ref no infla la API de accesorios, por ejemplo, si proporciona tipos con TypeScript¿Pasar un accesorio personalizado afecta la diferenciación cuando se trata de renderizado y provoca renderizados adicionales?
Una referencia puede desencadenar potencialmente una nueva representación si pasa una función de referencia de devolución de llamada en línea como accesorio. Pero de todos modos es una mejor idea definirlo como un método de instancia de clase o mediante alguna memorización como useCallback .
Ref es una propiedad estándar en los componentes de React .
Algunos componentes que envuelven a otros componentes para proporcionar funcionalidad adicional, usan ref para referirse al componente envuelto y esperan que el componente tenga la propiedad ref .
Es mejor que un componente tenga la propiedad ref para ser compatible con otros componentes y bibliotecas.
Los componentes de función no pueden tener la propiedad "ref" y deben usar forwardRef en su lugar para proporcionar la propiedad ref .