forwardRef: DOM-Refs für übergeordnete Komponenten verfügbar machen

Eine Ref ist eine Möglichkeit, eine Referenz auf einen DOM-Knoten oder eine Komponenteninstanz zu halten, die über mehrere Render-Vorgänge hinweg bestehen bleibt, ohne erneute Render-Vorgänge auszulösen. Sie weisen eine Ref mit dem Attribut ref zu, und React setzt nach dem Commit in den DOM deren current-Eigenschaft.

Der Haken ist, dass Sie eine Ref nicht auf dieselbe Weise an eine Funktionskomponente anhängen können wie an ein div. Eine übergeordnete Komponente hat standardmäßig keinen Weg zu dem DOM-Knoten innerhalb einer untergeordneten Komponente, da Refs nicht wie gewöhnliche Props weitergereicht werden.

React.forwardRef ermöglicht es einer Komponente, eine Ref von ihrer übergeordneten Komponente zu empfangen und an eines ihrer eigenen Elemente weiterzuleiten. Die Funktion Ihrer Komponente wird umschlossen, und ihre Signatur ändert sich so, dass ref neben props als zweites Argument eintrifft.

Dies ist der offizielle Mechanismus, um einen inneren DOM-Knoten für eine aufrufende Komponente bereitzustellen. Dadurch wird aus einer ansonsten undurchsichtigen untergeordneten Komponente eine Komponente, deren Element die übergeordnete Komponente direkt referenzieren kann.

Die umschlossene Funktion akzeptiert zwei Parameter: (props, ref). Der erste ist das gewöhnliche Props-Objekt, der zweite die weitergeleitete Ref. Anschließend verteilen Sie diese Ref auf das Element, das Sie bereitstellen möchten, oder weisen sie ihm zu, beispielsweise mit ref={ref} an einem inneren input.

Beachten Sie, dass nur mit forwardRef umschlossene Komponenten dieses zweite Argument erhalten. Eine gewöhnliche Funktionskomponente, die ref als zweiten Parameter aufführt, erhält stattdessen einfach undefined.

Ein klassisches Beispiel ist eine wiederverwendbare Textfeldkomponente, deren inneres input-Element Sie von einer übergeordneten Komponente aus fokussieren möchten. Indem Sie das Feld mit forwardRef umschließen und die weitergeleitete Ref an das zugrunde liegende input-Element anhängen, kann die übergeordnete Komponente direkt focus aufrufen.

So bleibt die Feldkomponente wiederverwendbar, während Sie genau dort kontrollierten imperativen Zugriff erhalten, wo er benötigt wird, etwa um beim Mounten das erste Feld eines Formulars zu fokussieren.

Weitergeleitete Refs ermöglichen auch Messungen. Eine übergeordnete Komponente kann offsetWidth und offsetHeight auslesen oder getBoundingClientRect für ein untergeordnetes Element aufrufen, das sie über forwardRef erhalten hat.

Das ist für Tooltips, Popovers und Layoutberechnungen nützlich, bei denen die übergeordnete Komponente die exakt gerenderte Größe oder Position eines inneren Elements kennen muss, bevor sie entscheidet, wie etwas relativ dazu platziert wird.

Da die weitergeleitete Ref auf einen echten DOM-Knoten zeigt, kann die übergeordnete Komponente native DOM-Methoden darauf aufrufen. Ein Aufruf von scrollIntoView für ein weitergeleitetes Listenelement bringt es reibungslos in den sichtbaren Bereich, und scrollTo an einem weitergeleiteten Scroll-Container positioniert dessen Inhalt neu.

Dies sind imperative Aktionen ohne saubere deklarative Entsprechung — genau für diese Art von Interaktion sind Refs gedacht.

Manchmal liegt das Element, das Sie bereitstellen möchten, mehrere Komponentenebenen tief. Sie können forwardRef verketten, sodass jede dazwischengeschaltete Ebene die empfangene Ref an die nächste weiterleitet, bis sie schließlich am Ziel-DOM-Knoten ankommt.

Jede umschließende Komponente in dieser Kette muss selbst forwardRef verwenden und die Ref weiterreichen, da eine gewöhnliche Komponente in der Mitte die Verbindung unterbrechen würde.

forwardRef und React.memo können kombiniert werden, um sowohl Ref-Weiterleitung als auch Memoisierung von Render-Vorgängen zu erhalten. Üblicherweise wird memo(forwardRef(Component)) verwendet, wobei das Ergebnis von forwardRef umschlossen wird, damit der Memoisierungsvergleich weiterhin greift.

Dieses Muster findet sich in performancekritischen Designsystemen, in denen eine häufig gerenderte Komponente sowohl ihren Knoten bereitstellen als auch unnötige erneute Render-Vorgänge vermeiden muss.

In den React DevTools wird eine forwardRef-Komponente mit einer ForwardRef-Bezeichnung angezeigt, die den Namen Ihrer Komponente umschließt. So können Sie auf einen Blick feststellen, dass eine Komponente an der Ref-Weiterleitung teilnimmt.

Sie können der inneren Funktion einen Namen geben oder displayName setzen, damit der Eintrag in den DevTools verständlicher ist als eine allgemeine, anonyme ForwardRef-Bezeichnung.

forwardRef dient dazu, DOM-Knoten und imperative Handles bereitzustellen, nicht dazu, Daten weiterzugeben. Wenn eine übergeordnete Komponente eine untergeordnete beeinflussen soll, verwenden Sie vorzugsweise gewöhnliche Props und State, statt über eine Ref in sie hineinzureichen.

Eine übermäßige Verwendung von Refs koppelt Komponenten eng und umgeht den Datenfluss von React, wodurch das Verhalten schwerer nachzuvollziehen ist. Verwenden Sie forwardRef nur dann, wenn eine deklarative Prop die Interaktion tatsächlich nicht ausdrücken kann.

forwardRef bleibt das Standardwerkzeug, um Refs in Komponentenbibliotheken und wiederverwendbaren Eingabekomponenten bereitzustellen. Neuere React-Versionen gehen dazu über, ref als gewöhnliche Prop zu übergeben, aber forwardRef wird weiterhin häufig verwendet und ist wichtig zu verstehen.

Wenn Sie forwardRef gut beherrschen, sind Sie sowohl auf bestehende Codebasen als auch auf die zugrunde liegenden Mechanismen vorbereitet, auf denen jede zukünftige Syntax für ref als Prop aufbaut.

Testen Sie Ihr Verständnis dafür, wie eine forwardRef-Komponente ihre Ref empfängt.

forwardRef behebt die Einschränkung, dass eine übergeordnete Komponente nicht auf den DOM-Knoten einer untergeordneten Komponente zugreifen kann, indem die Komponente ein zweites Argument ref erhält, das sie an ein inneres Element weiterleiten kann. Dadurch werden das Fokussieren, Messen und Scrollen untergeordneter Elemente ermöglicht.

forwardRef lässt sich mit memo kombinieren, durch mehrere Ebenen verketten und wird in den DevTools als ForwardRef angezeigt. Verwenden Sie es für imperativen DOM-Zugriff, nicht zur Datenweitergabe — dafür sind Props besser geeignet.