значення використання React.forwardRef vs користувальницької реф

Я бачу, що React.forwardRef, здається, є санкціонованим способом передачі відгуку до дочірнього функціонального компонента від реагуючих документів:

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

Однак у чому полягає перевага, ніж просто проходження користувальницької опори ?:

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

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

Єдиною перевагою, про яку я можу подумати, - це, можливо, мати постійну версію для реф., Але чи є якась інша перевага? Чи впливає передача користувальницької опори на відмінність, якщо мова йде про візуалізацію та викликає додаткові візуалізації, безумовно, не тому, що ref зберігається як змінне стан у currentполі?

Скажімо, наприклад, що ви хотіли пройти декілька рефлексив (що може означати запах коду, але все-таки), тоді єдиним рішенням, яке я бачу, було б використання реквізиту customRef.

Я думаю, що моє запитання полягає у тому, яке значення має використання forwardRefспеціальної опори?

Навіть документи React згадують користувацьку допоміжну підтримку як гнучкіший підхід до forwardRef:

Якщо ви використовуєте React 16.2 або нижчу версію, або якщо вам потрібна більша гнучкість, ніж передбачено переадресацією , ви можете скористатися цим альтернативним підходом і явно передати відповідне джерело як інакше підп .

Існує також суть , в якій Дан Абрамов пише про свої переваги:

• сумісний з усіма версіями React
• працює для компонентів класу та функцій
• спрощує передачу посилання на вкладений компонент на кілька шарів глибиною

Я додам, що проходження рефлексу, як звичайний реквізит, не спричиняє порушень змін, і це шлях для отримання декількох змін . Єдині переваги, forwardRefякі мені спадають на думку:

• API єдиного доступу для вузлів DOM, функціональних та класових компонентів (ви це згадали)
• ref атрибут не роздуває ваш реквізит API, наприклад, якщо ви надаєте типи з TypeScript

Чи впливає передача користувальницької опори на відмінність, що стосується візуалізації та викликає додаткові візуалізації?

Посилання може потенційно викликати повторне візуалізацію, якщо ви передасте функцію відмовлення вбудованого зворотного дзвінка в якості опори. Але краще все-таки визначити його як метод екземпляра класу або за допомогою подібного запам'ятовування useCallback.

Refє стандартною властивістю Reactкомпонентів.

Деякі компоненти, які обертають інші компоненти, щоб забезпечити додаткову функціональність, використовуйте refдля позначення загорнутого компонента та очікуйте, що компонент має refвластивість.

Для компонента краще мати refвластивість бути сумісним з іншими компонентами та бібліотеками.

Компоненти функцій не можуть мати властивість "ref", а їх потрібно використовувати forwardRefдля надання refвластивості.