PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

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

Компоненты

В классовых компонентах исторически сложились три способа работы с ref: современный createRef, callback ref и устаревший строковый.

React.createRef() — стандартный способ (React 16.3+)

class Form extends React.Component {
  inputRef = React.createRef();   // { current: null }

  componentDidMount() {
    this.inputRef.current.focus(); // узел после монтирования
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

Создаётся один раз как поле класса; React кладёт DOM-узел (или инстанс дочернего классового компонента) в .current. Аналог useRef в функциях (отличие: createRef при каждом вызове создаёт новый контейнер, поэтому в функциональных компонентах не используется).

Callback ref — гибкий способ

class List extends React.Component {
  rows = new Map();

  setRowRef = (id) => (node) => {
    if (node) this.rows.set(id, node);
    else this.rows.delete(id);          // null при отсоединении
  };

  render() {
    return this.props.items.map((it) => (
      <li key={it.id} ref={this.setRowRef(it.id)}>{it.name}</li>
    ));
  }
}

Функция вызывается при присоединении (с узлом) и отсоединении (с null): точный контроль момента, динамические наборы ref'ов (списки), измерения при появлении.

Строковые ref — устаревшие

<input ref="myInput" /> + this.refs.myInput — легаси-API с проблемами (производительность, ломается в HOC); удалён из современного React. Упомянуть — только как «знаю, что было и почему нельзя».

Дополнительно

Ref на классовый дочерний компонент даёт инстанс (можно звать методы) — с функциональными так нельзя (нужен useImperativeHandle, а до React 19 ещё и forwardRef).

Коротко для собеседования

В классах: React.createRef() как поле класса (стандарт, узел в .current после монтирования), callback ref (функция получает node/null — контроль момента и динамические списки) и устаревшие строковые refs (удалены). Ref на классовый ребёнок возвращает инстанс компонента.

Другие вопросы раздела