forwardRef: udostępnianie ref DOM komponentom nadrzędnym

Ref to sposób na przechowywanie odwołania do węzła DOM lub instancji komponentu, które zachowuje się między renderowaniami bez wywoływania ponownego renderowania. Ref przypisuje się za pomocą atrybutu ref, a React wypełnia jego właściwość current po zatwierdzeniu zmian w DOM.

Problem polega na tym, że ref nie można przypisać do komponentu funkcyjnego tak jak do elementu div. Domyślnie rodzic nie ma dostępu do węzła DOM znajdującego się wewnątrz komponentu potomnego, ponieważ ref nie są przekazywane tak jak zwykłe props.

React.forwardRef pozwala komponentowi otrzymać ref od rodzica i przekazać go dalej do jednego z własnych elementów. Opakowuje funkcję komponentu i zmienia jej sygnaturę, tak aby ref docierał jako drugi argument, obok props.

Jest to oficjalny mechanizm umożliwiający udostępnienie wewnętrznego węzła DOM komponentowi wywołującemu, zmieniając w innym przypadku nieprzezroczysty komponent potomny w taki, którego element rodzic może bezpośrednio wskazać.

Opakowana funkcja przyjmuje dwa parametry: (props, ref). Pierwszym jest zwykły obiekt props, a drugim przekazany ref. Następnie należy rozwinąć ten ref lub przypisać go do elementu, który ma zostać udostępniony, na przykład ref={ref} do wewnętrznego inputu.

Należy pamiętać, że tylko komponenty opakowane za pomocą forwardRef otrzymują ten drugi argument. Zwykły komponent funkcyjny, którego drugi parametr nazywa się ref, otrzyma po prostu undefined.

Klasycznym przykładem jest wielokrotnego użytku komponent pola tekstowego, którego wewnętrzne pole input ma zostać uaktywnione przez rodzica. Opakowanie pola w forwardRef i przypisanie przekazanego ref do bazowego elementu input pozwala rodzicowi bezpośrednio wywołać na nim focus.

Dzięki temu komponent pola pozostaje wielokrotnego użytku, a jednocześnie zapewnia kontrolowany imperatywny dostęp dokładnie tam, gdzie jest on potrzebny, na przykład do ustawienia fokusu na pierwszym polu formularza podczas montowania.

Przekazywane ref umożliwiają również pomiar. Rodzic może odczytać offsetWidth i offsetHeight albo wywołać getBoundingClientRect na elemencie potomnym otrzymanym za pośrednictwem forwardRef.

Jest to przydatne w przypadku tooltipów, popoverów i obliczeń układu, gdy rodzic musi znać dokładny rozmiar lub położenie wyrenderowanego elementu wewnętrznego, zanim zdecyduje, jak umieścić względem niego inny element.

Ponieważ przekazany ref wskazuje rzeczywisty węzeł DOM, rodzic może wywoływać na nim natywne metody DOM. Wywołanie scrollIntoView na przekazanym elemencie listy płynnie przewija widok do tego elementu, a scrollTo na przekazanym kontenerze przewijania zmienia położenie jego zawartości.

Są to działania imperatywne, które nie mają prostego deklaratywnego odpowiednika — dokładnie do obsługi takich interakcji przeznaczone są ref.

Czasami element, który ma zostać udostępniony, jest ukryty kilka komponentów głębiej. Można łączyć forwardRef, aby każda warstwa pośrednia przekazywała otrzymany ref do kolejnej, aż ostatecznie trafi on do docelowego węzła DOM.

Każdy wrapper w tym łańcuchu musi sam używać forwardRef i przekazywać ref dalej, ponieważ zwykły komponent umieszczony pośrodku przerwałby to połączenie.

forwardRef i React.memo można połączyć, aby uzyskać zarówno przekazywanie ref, jak i zapamiętywanie renderowania. Zwykle stosuje się kolejność memo(forwardRef(Component)), opakowując wynik forwardRef, aby porównanie memo nadal obowiązywało.

Ten wzorzec pojawia się w systemach projektowych wrażliwych na wydajność, w których często renderowany komponent musi zarówno udostępniać swój węzeł, jak i pomijać zbędne ponowne renderowania.

W React DevTools komponent forwardRef jest wyświetlany z etykietą ForwardRef opakowującą nazwę komponentu. Dzięki temu można szybko potwierdzić, że komponent uczestniczy w przekazywaniu ref.

Aby wpis w DevTools był czytelniejszy niż ogólna etykieta anonimowego ForwardRef, można nadać nazwę funkcji wewnętrznej lub ustawić displayName.

forwardRef służy do udostępniania węzłów DOM i uchwytów imperatywnych, a nie do przekazywania danych. Jeśli rodzic musi wpływać na komponent potomny, należy preferować zwykłe props i state zamiast uzyskiwania dostępu przez ref.

Nadużywanie ref silnie wiąże komponenty i omija przepływ danych React, przez co trudniej zrozumieć działanie aplikacji. Po forwardRef należy sięgać tylko wtedy, gdy deklaratywne props rzeczywiście nie pozwalają wyrazić danej interakcji.

forwardRef pozostaje standardowym narzędziem do udostępniania ref w bibliotekach komponentów i wielokrotnego użytku polach input. Nowsze wersje React zmierzają w kierunku przekazywania ref jako zwykłego props, ale forwardRef nadal jest powszechnie używany i ważny do zrozumienia.

Dobra znajomość tego mechanizmu przygotowuje zarówno do pracy z istniejącymi bazami kodu, jak i do zrozumienia podstawowych mechanizmów, na których będzie opierać się każda przyszła składnia ref-as-prop.

Sprawdź, jak dobrze rozumiesz sposób, w jaki komponent forwardRef otrzymuje ref.

forwardRef rozwiązuje ograniczenie polegające na tym, że rodzic nie może dotrzeć do węzła DOM komponentu potomnego, przekazując komponentowi drugi argument ref, który można przypisać do wewnętrznego elementu. Umożliwia to ustawianie fokusu, mierzenie i przewijanie elementów potomnych.

forwardRef można łączyć z memo i przekazywać przez kolejne warstwy; w DevTools jest wyświetlany jako ForwardRef. Należy używać go do imperatywnego dostępu do DOM, a nie do przekazywania danych, do czego lepiej nadają się props.