Какие есть Ref в классовых компонентах?

Рефы (Refs) в классовых компонентах React

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

Создание Ref через React.createRef()

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    // Создаём ref в конструкторе
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    // Получаем доступ к DOM-элементу через ref.current
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.focusInput}>Фокус на инпут</button>
      </div>
    );
  }
}

Строковые рефы (Deprecated)

Старый способ, больше не рекомендуется использовать:

class OldComponent extends React.Component {
  render() {
    return <input ref="inputRef" />;
  }
  // Доступ: this.refs.inputRef.value
}

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

Рефы обратного вызова (Callback Refs)

Функция передаётся как ref, которая будет вызвана с DOM-элементом:

class CustomComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  setInputRef = (element) => {
    this.inputRef = element;
  }

  focusInput = () => {
    if (this.inputRef) {
      this.inputRef.focus();
    }
  }

  render() {
    return (
      <div>
        <input ref={this.setInputRef} />
        <button onClick={this.focusInput}>Фокус</button>
      </div>
    );
  }
}

Проксирование Refs к дочерним компонентам

Для передачи рефа из родительского компонента к дочернему используется React.forwardRef(). Хотя это обычно используется с функциональными компонентами, концепция работает и для класса-обёртки.

Основные типы Refs в классовых компонентах

1. React.createRef() — традиционный способ, создаётся в конструкторе 2. Callback refs — функция вызывается с элементом 3. Строковые refs — устарели, не рекомендуются

Когда использовать Refs

✅ Уместно:

• Управление фокусом на инпутах
• Запуск анимаций
• Интеграция с внешними DOM-библиотеками
• Управление медиаплеерами
• Получение значения неконтролируемого компонента

❌ Не использовать:

• Для чего-либо декларативного
• Передача данных между компонентами (props)
• Обновление состояния (state)

Лучшие практики

1. Избегайте перегрузки рефов
2. Используйте функциональные компоненты с useRef
3. Всегда проверяйте на null перед использованием
4. Документируйте причину использования ref

В современном React функциональные компоненты с useRef хуком являются предпочтительным способом работы с рефами.