ценность использования React.forwardRef по сравнению с пользовательскими ссылками


13

Я вижу, что 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>;

Единственное преимущество, о котором я могу подумать, это, возможно, наличие последовательного API для рефери, но есть ли какое-то другое преимущество? Влияет ли передача пользовательского реквизита на диффузию, когда дело доходит до рендеринга, и вызывает дополнительные рендеры, конечно же, не так, как ссылка сохраняется как изменяемое состояние в currentполе?

Скажем, например, что вы хотите передать несколько ссылок (которые могут указывать на запах кода, но все же), тогда единственное решение, которое я вижу, это использование пользовательских реквизитов.

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

Ответы:


3

Даже в документах React пользовательский ref-реквизит упоминается как более гибкий подход к forwardRef:

Если вы используете React 16.2 или ниже, или если вам требуется больше гибкости, чем при пересылке ссылок , вы можете использовать этот альтернативный подход и явно передать ссылку как опору с другим именем .

Существует также суть , в которой Дан Абрамов пишет о своих преимуществах:

  • совместим со всеми версиями React
  • работает для компонентов класса и функций
  • упрощает передачу ссылки на вложенный компонент глубиной в несколько слоев

Я хотел бы добавить, что передача рефсов в качестве обычных реквизитов не вызывает серьезных изменений и является подходом для нескольких рефери. Единственные преимущества, которые forwardRefприходят мне в голову:

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

Влияет ли передача пользовательского реквизита на диффузию, когда дело доходит до рендеринга, и вызывает дополнительные рендеры?

Ссылка может потенциально вызвать повторную визуализацию, если вы передаете встроенную функцию обратного вызова в качестве опоры. Но в любом случае лучше определить его как метод экземпляра класса или с помощью некоторого напоминания useCallback.


1
Круто, спасибо Форду, я как бы подумала, что дело в том, чтобы просто пролить свет на это.
Лесбаа

0

Refявляется стандартным свойством в Reactкомпонентах.

Некоторые компоненты, которые обертывают другие компоненты для обеспечения дополнительной функциональности, используют refдля ссылки на обернутый компонент и ожидают, что у компонента есть refсвойство.

Лучше, чтобы компонент имел refсвойство быть совместимым с другими компонентами и библиотеками.

Компоненты функций не могут иметь свойство ref и должны forwardRefвместо этого использовать его для предоставления refсвойства.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.