valore dell'uso di React.forwardRef vs prop di riferimento personalizzato

Vedo che React.forwardRef sembra essere il modo sanzionato di passare un riferimento a un componente funzionale figlio, dai documenti di reazione:

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

Tuttavia, qual è il vantaggio di fare questo semplicemente passando un puntello personalizzato ?:

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

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

L'unico vantaggio che mi viene in mente è forse avere un'API coerente per gli arbitri, ma c'è qualche altro vantaggio? Il passaggio di un puntello personalizzato influisce sulla differenza quando si tratta di rendering e causa rendering aggiuntivi, sicuramente non poiché il riferimento è memorizzato come stato modificabile nel currentcampo?

Supponiamo, ad esempio, che tu voglia passare più ref (quale tbh, potrebbe indicare odore di codice, ma comunque), quindi l'unica soluzione che posso vedere sarebbe quella di usare i puntelli customRef.

Immagino che la mia domanda sia: qual è il valore dell'utilizzo forwardRefsu un prop personalizzato?

Anche i documenti di React menzionano il riferimento personalizzato come un approccio più flessibile a forwardRef:

Se usi React 16.2 o versioni precedenti, o se hai bisogno di una maggiore flessibilità rispetto a quella fornita dall'inoltro ref , puoi usare questo approccio alternativo e passare esplicitamente un ref come un prop diverso .

C'è anche una sintesi , in cui Dan Abramov scrive dei suoi vantaggi:

• compatibile con tutte le versioni di React
• funziona per componenti di classe e funzione
• semplifica il passaggio di un riferimento a un componente nidificato a diversi livelli di profondità

Vorrei aggiungere che il passaggio di ref come al solito oggetti di scena non causa interruzioni di modifica ed è la strada da percorrere per più ref. Gli unici vantaggi forwardRefche mi vengono in mente sono:

• API di accesso uniforme per nodi DOM, componenti funzionali e di classe (che hai menzionato)
• ref L'attributo non gonfia l'API degli oggetti di scena, ad esempio se si forniscono tipi con TypeScript

Il passaggio di un puntello personalizzato influisce sulla differenza quando si tratta di rendering e causa rendering aggiuntivi?

Un ref può potenzialmente innescare un nuovo rendering se si passa una funzione ref di callback in linea come prop. Ma è comunque una migliore idea definirlo come metodo di istanza di classe o tramite alcuni memoization come useCallback.

Refè una proprietà standard nei Reactcomponenti.

Alcuni componenti che avvolgono altri componenti per fornire funzionalità aggiuntive, utilizzano refper fare riferimento al componente spostato e prevedono che il componente abbia refproprietà.

È meglio che un componente abbia la refproprietà per essere compatibile con altri componenti e librerie.

I componenti di funzione non possono avere la proprietà "ref" e devono forwardRefinvece utilizzare per fornire la refproprietà.