Я вижу, что 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
сравнению с пользовательским реквизитом?
источник
Ref
является стандартным свойством вReact
компонентах.Некоторые компоненты, которые обертывают другие компоненты для обеспечения дополнительной функциональности, используют
ref
для ссылки на обернутый компонент и ожидают, что у компонента естьref
свойство.Лучше, чтобы компонент имел
ref
свойство быть совместимым с другими компонентами и библиотеками.Компоненты функций не могут иметь свойство ref и должны
forwardRef
вместо этого использовать его для предоставленияref
свойства.источник