valeur de l'utilisation de React.forwardRef par rapport à un accessoire de référence personnalisé

Je vois que React.forwardRef semble être le moyen approuvé de passer une référence à un composant fonctionnel enfant, à partir des documents React:

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>;

Cependant, quel est l'avantage de faire cela en passant simplement un accessoire personnalisé?:

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

Le seul avantage auquel je peux penser est peut-être d'avoir une API cohérente pour les références, mais y a-t-il un autre avantage? Le passage d'un accessoire personnalisé affecte-t-il la différence en ce qui concerne le rendu et provoque-t-il des rendus supplémentaires, sûrement pas car la référence est stockée comme état modifiable dans le currentchamp?

Supposons par exemple que vous vouliez passer plusieurs références (dont tbh, pourrait indiquer une odeur de code, mais quand même), alors la seule solution que je peux voir serait d'utiliser des accessoires customRef.

Je suppose que ma question est quelle est la valeur de l'utilisation par forwardRefrapport à un accessoire personnalisé?

Même les documents React mentionnent l'accessoire de référence personnalisé comme une approche plus flexible pour forwardRef:

Si vous utilisez React 16.2 ou une version antérieure, ou si vous avez besoin de plus de flexibilité que celle fournie par le transfert de références , vous pouvez utiliser cette approche alternative et transmettre explicitement une référence en tant que prop nommé différemment .

Il y a aussi un résumé , dans lequel Dan Abramov écrit sur ses avantages:

• compatible avec toutes les versions de React
• fonctionne pour les composants de classe et de fonction
• simplifie le passage d'une référence à un composant imbriqué à plusieurs couches de profondeur

J'ajouterais que passer des références comme des accessoires habituels ne provoque pas de changements de rupture et est la voie à suivre pour plusieurs références. Les seuls avantages de forwardRefme venir à l'esprit sont:

• API d'accès uniforme pour les nœuds DOM, les composants fonctionnels et de classe (vous l'avez mentionné)
• ref L'attribut ne gonfle pas votre API d'accessoires, par exemple si vous fournissez des types avec TypeScript

Le passage d'un accessoire personnalisé affecte-t-il les différences en matière de rendu et provoque-t-il des rendus supplémentaires?

Une référence peut potentiellement déclencher un nouveau rendu si vous transmettez une fonction de référence de rappel en ligne comme accessoire. Mais c'est une meilleure idée de toute façon de la définir comme méthode d'instance de classe ou via une mémorisation comme useCallback.

Refest une propriété standard des Reactcomposants.

Certains composants qui encapsulent d'autres composants pour fournir des fonctionnalités supplémentaires, utilisent refpour faire référence au composant encapsulé et s'attendent à ce que le composant ait une refpropriété.

Il est préférable qu'un composant ait la refpropriété d'être compatible avec d'autres composants et bibliothèques.

Les composants de fonction ne peuvent pas avoir la propriété "ref" et doivent utiliser à la forwardRefplace pour fournir la refpropriété.