forwardRef: предоставление родителям доступа к ссылкам DOM

Ссылка ref — это способ хранить ссылку на узел DOM или экземпляр компонента, которая сохраняется между отрисовками, не вызывая повторных отрисовок. Вы указываете её с помощью атрибута ref, а React заполняет её свойство current после фиксации изменений в DOM.

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

React.forwardRef позволяет компоненту получить ref от родителя и передать его дальше одному из собственных элементов. Он оборачивает функцию компонента и изменяет её сигнатуру так, что ref приходит вторым аргументом вместе со свойствами.

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

Обернутая функция принимает два параметра: (props, ref). Первый — обычный объект свойств, а второй — переданная дальше ссылка ref. Затем эту ссылку распределяют по элементу или прикрепляют к нему, чтобы предоставить к нему доступ, например задавая ref={ref} для внутреннего поля ввода.

Помните, что только компоненты, обёрнутые в forwardRef, получают этот второй аргумент. Обычный функциональный компонент, в котором ref указан вторым параметром, просто получит значение undefined.

Классический пример — повторно используемый компонент текстового поля, внутреннее поле ввода которого должен сфокусировать родитель. Обернув поле в forwardRef и прикрепив переданную дальше ссылку ref к исходному элементу поля ввода, родитель может напрямую вызвать у него focus().

Так компонент поля остаётся повторно используемым, а управляемый императивный доступ предоставляется именно там, где он нужен, например для фокусировки первого поля формы при монтировании.

Переданные дальше ссылки ref также позволяют выполнять измерения. Родитель может прочитать offsetWidth, offsetHeight или вызвать getBoundingClientRect у дочернего элемента, полученного через forwardRef.

Это полезно для всплывающих подсказок, всплывающих окон и расчётов макета, когда родителю нужно знать точный отображаемый размер или положение внутреннего элемента, прежде чем решить, как разместить что-либо относительно него.

Поскольку переданная дальше ссылка ref указывает на настоящий узел DOM, родитель может вызывать у него встроенные методы DOM. Вызов scrollIntoView у переданного дальше элемента списка плавно прокручивает страницу к нему, а scrollTo у переданного дальше контейнера прокрутки изменяет положение его содержимого.

Это императивные действия, для которых нет удобного декларативного эквивалента, — именно для таких взаимодействий и предназначены ссылки ref.

Иногда элемент, который нужно предоставить наружу, находится на несколько компонентов глубже. Можно объединить несколько вызовов forwardRef в цепочку: каждый промежуточный уровень передаёт полученную ссылку ref следующему, пока она наконец не окажется на целевом узле DOM.

Каждая обёртка в цепочке сама должна использовать forwardRef и передавать ссылку ref дальше, поскольку обычный компонент в середине разорвал бы это соединение.

forwardRef и React.memo можно объединить, чтобы получить и передачу ссылок ref, и мемоизацию отрисовки. Обычно используется порядок memo(forwardRef(Component)): результат forwardRef оборачивается в memo, поэтому сравнение memo по-прежнему применяется.

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

В React DevTools компонент forwardRef отображается с меткой ForwardRef, оборачивающей имя вашего компонента. Благодаря этому легко сразу убедиться, что компонент участвует в передаче ссылок ref.

Можно присвоить внутренней функции имя или задать displayName, чтобы запись в DevTools была понятнее, чем обычная анонимная метка ForwardRef.

forwardRef предназначен для предоставления доступа к узлам DOM и императивным дескрипторам, а не для передачи данных. Если родителю нужно повлиять на дочерний компонент, предпочтительнее использовать обычные свойства и состояние, а не обращаться внутрь через ссылку ref.

Чрезмерное использование ссылок ref создаёт тесную связанность компонентов и обходит поток данных React, из-за чего за поведением становится сложнее следить. Используйте forwardRef только тогда, когда декларативное свойство действительно не может выразить нужное взаимодействие.

forwardRef остаётся стандартным инструментом для предоставления ссылок ref в библиотеках компонентов и повторно используемых полях ввода. В новых версиях React развивается подход, при котором ref можно передавать как обычное свойство, но forwardRef по-прежнему широко используется и важен для понимания.

Хорошее знание этого инструмента подготовит вас и к работе с существующими кодовыми базами, и к пониманию базовой механики, на которой будет основан любой будущий синтаксис передачи ref как свойства.

Проверьте, насколько хорошо вы понимаете, как компонент с forwardRef получает свою ссылку ref.

forwardRef устраняет ограничение, из-за которого родитель не может обратиться к узлу DOM дочернего компонента: компонент получает второй аргумент ref и может передать его внутреннему элементу. Это позволяет фокусировать, измерять и прокручивать дочерние элементы.

forwardRef можно объединять с memo и передавать через несколько уровней; в DevTools он отображается как ForwardRef. Используйте его для императивного доступа к DOM, а не для передачи данных — с этим лучше справляются свойства.