Vyhledávání na webu

javascript - hodnota používání React.forwardRef oproti vlastní vlastnosti ref

Vidím, že React.forwardRef se zdá být schváleným způsobem předávání ref do dětské funkční komponenty, podle dokumentace Reactu:

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

Jaká je však výhoda toho dělat toto oproti jednoduše předávání vlastního prop?

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

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

Jedinou výhodou, na kterou si dokážu vzpomenout, je možná mít konzistentní API pro refy, ale existuje nějaká jiná výhoda? Ovlivňuje předání vlastního propu porovnávání při renderování a způsobuje další rendering, jistě ne, protože ref je uložen jako mutovatelný stav v poli current?

Řekněme například, že byste chtěli předat více referencí (což upřímně řečeno může naznačovat problém s kódem, ale přesto), pak jediné řešení, které vidím, by bylo použít vlastnosti customRef.

Asi se ptám, jaká je hodnota použití forwardRef oproti vlastní vlastnosti (prop).

Odpověď č. 1

Dokonce i dokumentace Reactu zmiňuje vlastní vlastnost ref jako flexibilnější přístup k forwardRef:

Pokud používáte React 16.2 nebo starší, nebo pokud potřebujete větší flexibilitu než je poskytována přeposíláním ref, můžete použít tento alternativní přístup a explicitně předat ref jako propoj s jiným názvem.

Existuje také gist, ve kterém Dan Abramov píše o jeho výhodách:

  • kompatibilní se všemi verzemi Reactu
  • funguje pro komponenty třídy a funkce
  • zjednodušuje předávání reference do vnořené komponenty několik vrstev hluboko

Rád bych doplnil, že předávání referencí jako běžné vlastnosti nezpůsobuje zásadní změny a je to správný způsob pro více referencí. Jediné výhody forwardRef, které mě napadají, jsou:

  • jednotné přístupové API pro DOM uzly, funkční a třídní komponenty (to jste zmínil)
  • Atribut ref nenafukuje vaše props API, např. pokud poskytujete typy s TypeScriptem

Ovlivňuje předávání vlastního prop procesu diffování při vykreslování a způsobuje další vykreslení?

Reference může potenciálně vyvolat opětovné vykreslení, pokud předáte inline callback ref funkci jako prop. Ale stejně je lepší ji definovat jako metodu instance třídy nebo pomocí nějaké memoizace, například useCallback.

Související články