wartość użycia React.forwardRef vs custom ref ref

Widzę, że React.forwardRef wydaje się być usankcjonowanym sposobem przekazywania referencji do potomnego komponentu funkcjonalnego, z dokumentów reakcji:

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

Jaka jest jednak zaleta robienia tego w porównaniu do zwykłego rekwizytu ?:

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

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

Jedyną zaletą, jaką mogę wymyślić, może mieć spójny interfejs API dla referencji, ale czy jest jakaś inna zaleta? Czy przekazanie niestandardowego rekwizytu wpływa na różnice w renderowaniu i powoduje dodatkowe renderowanie, na pewno nie, ponieważ ref jest przechowywany jako zmienny stan w currentpolu?

Powiedzmy na przykład, że chcesz przekazać wiele referencji (które tbh mogą wskazywać na zapach kodu, ale nadal), wtedy jedynym rozwiązaniem, jakie widzę, byłoby użycie rekwizytów customRef.

Myślę, że moje pytanie brzmi: jaka jest wartość używania forwardRefniestandardowego rekwizytu?

Nawet dokumenty React wspominają o niestandardowym rekwizytach jako bardziej elastycznym podejściu do forwardRef:

Jeśli używasz React 16.2 lub niższej lub jeśli potrzebujesz większej elastyczności niż w przypadku przekazywania referencji , możesz użyć tego alternatywnego podejścia i jawnie przekazać referencję jako prop o innej nazwie .

Jest też istota , w której Dan Abramov pisze o swoich zaletach:

• kompatybilny ze wszystkimi wersjami React
• działa dla komponentów klasy i funkcji
• upraszcza przekazywanie odwołania do zagnieżdżonego komponentu o głębokości kilku warstw

Dodałbym, że przekazywanie referencji jak zwykle rekwizyty nie powoduje przełomowych zmian i jest drogą do wielokrotnych referencji. Jedyne zalety, jakie forwardRefprzychodzą mi na myśl, to:

• jednolity dostęp API dla węzłów DOM, komponentów funkcjonalnych i klasowych (wspominałeś o tym)
• ref atrybut nie powoduje wzdęcia interfejsu API rekwizytów, np. jeśli udostępniasz typy za pomocą TypeScript

Czy przekazanie niestandardowego rekwizytu wpływa na różnice w renderowaniu i powoduje dodatkowe renderowanie?

Ref może potencjalnie wyzwalać ponowne renderowanie, jeśli przekażesz wbudowaną funkcję ref w wywołaniu zwrotnym jako prop. Ale i tak lepszym pomysłem jest zdefiniowanie go jako metody instancji klasy lub za pomocą jakiegoś zapamiętywania useCallback.

Refjest standardową właściwością Reactkomponentów.

Niektóre komponenty, które zawijają inne komponenty w celu zapewnienia dodatkowej funkcjonalności, służą refdo odwoływania się do opakowanego komponentu i oczekują, że komponent ma refwłaściwość.

Lepiej jest, aby składnik refbył zgodny z innymi składnikami i bibliotekami.

Komponenty funkcji nie mogą mieć właściwości „ref” i forwardRefzamiast tego muszą używać refwłaściwości.