Wert der Verwendung von React.forwardRef vs benutzerdefinierte ref prop

Ich sehe, dass React.forwardRef die sanktionierte Methode zu sein scheint, einen Ref an eine untergeordnete Funktionskomponente aus den React-Dokumenten zu übergeben:

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

Was ist jedoch der Vorteil, wenn Sie dies tun, anstatt einfach eine benutzerdefinierte Requisite zu übergeben?:

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

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

Der einzige Vorteil, den ich mir vorstellen kann, ist vielleicht eine konsistente API für Schiedsrichter, aber gibt es noch einen anderen Vorteil? Beeinflusst das Übergeben einer benutzerdefinierten Requisite das Rendern und verursacht zusätzliche Renderings, sicherlich nicht, da der Ref als veränderlicher Status im currentFeld gespeichert ist ?

Angenommen, Sie möchten mehrere Verweise übergeben (was tbh möglicherweise auf Codegeruch hinweist, aber immer noch), dann wäre die einzige Lösung, die ich sehen kann, die Verwendung von customRef-Requisiten.

Ich denke, meine Frage ist, welchen Wert es hat, forwardRefeine benutzerdefinierte Requisite zu verwenden.

Sogar React-Dokumente erwähnen die benutzerdefinierte Referenz als flexibleren Ansatz für forwardRef:

Wenn Sie React 16.2 oder niedriger verwenden oder mehr Flexibilität benötigen als durch die Weiterleitung von Refs bereitgestellt , können Sie diesen alternativen Ansatz verwenden und eine Ref explizit als Requisite mit einem anderen Namen übergeben .

Es gibt auch einen Kern , in dem Dan Abramov über seine Vorteile schreibt:

• Kompatibel mit allen React-Versionen
• funktioniert für Klassen- und Funktionskomponenten
• vereinfacht das Übergeben eines Refs an eine verschachtelte Komponente, die mehrere Ebenen tief ist

Ich würde hinzufügen, dass das Übergeben von Refs wie gewohnt keine wesentlichen Änderungen verursacht und der Weg für mehrere Refs ist. Die einzigen Vorteile forwardRef, die mir in den Sinn kommen, sind:

• einheitliche Zugriffs-API für DOM-Knoten, Funktions- und Klassenkomponenten (das haben Sie erwähnt)
• ref Das Attribut bläht Ihre Requisiten-API nicht auf, z. B. wenn Sie Typen mit TypeScript bereitstellen

Hat das Übergeben einer benutzerdefinierten Requisite unterschiedliche Auswirkungen beim Rendern und führt zu zusätzlichen Rendern?

Ein Ref kann möglicherweise ein erneutes Rendern auslösen, wenn Sie eine Inline- Rückruf-Ref- Funktion als Requisite übergeben. Aber es ist trotzdem eine bessere Idee , es als Klasseninstanzmethode oder über eine Memoisierung wie zu definieren useCallback.

Refist eine Standardeigenschaft in ReactKomponenten.

Einige Komponenten, die andere Komponenten umschließen, um zusätzliche Funktionen bereitzustellen, refbeziehen sich auf umschlossene Komponenten und erwarten, dass die Komponente über refEigenschaften verfügt .

Es ist besser, wenn eine Komponente die refEigenschaft hat, mit anderen Komponenten und Bibliotheken kompatibel zu sein.

Funktionskomponenten können nicht die Eigenschaft "ref" haben und müssen forwardRefstattdessen zur Bereitstellung der refEigenschaft verwendet werden.