Создание ref в классовом компоненте React с помощью React.createRef()

Ref (ссылка) в React представляет собой механизм, который позволяет нам прямо взаимодействовать с элементом DOM или экземпляром компонента в React. В классовых компонентах в React для создания ref мы используем метод React.createRef().

Как это работает?

В классовых компонентах React, ref создается и связывается с элементом DOM или экземпляром класса через конструктор. В конструкторе мы создаем новый ref, используя React.createRef() и присваиваем его экземпляру свойства, обычно с таким же именем.

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  /* ... */
}

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

  render() {
    return <div ref={this.myRef} />;
  }

Таким образом, мы можем обратиться к связанному элементу прямо через this.myRef.current.

Остальные предложенные варианты ответов в вопросе - React.ref(), this.ref.create(), new Ref(), являются неверными, так как не представляют реально существующих функций или методов в React.

Примечания и лучшие практики

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