Зачем нужно связывание в React?

«Связывание» в React — чаще всего про bind(this) в классовых компонентах; иногда под этим имеют в виду data binding (связь данных и UI). Разберём оба смысла.

Смысл 1: биндинг this в классах

Методы класса при передаче как колбэки теряют this:

class Form extends React.Component {
  handleSubmit() {
    this.setState({ sent: true }); // TypeError: this === undefined
  }

  render() {
    return <button onClick={this.handleSubmit}>Ок</button>;
    // передали ФУНКЦИЮ без привязки к экземпляру
  }
}

Причина — семантика this в JS: он определяется способом вызова, а не местом объявления; колбэк вызывается «сам по себе», без объекта. Способы связывания:

// 1. bind в конструкторе (классика)
constructor(props) {
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
}

// 2. стрелочное поле класса (современный стандарт для классов)
handleSubmit = () => { this.setState({ sent: true }); };

// 3. стрелка в render (работает, но новая функция каждый рендер)
onClick={() => this.handleSubmit()}

В функциональных компонентах проблемы нет — this не используется, поэтому с переходом на хуки тема ушла.

Смысл 2: связывание данных (data binding)

В React — однонаправленное: state → UI (данные вниз через props/JSX). «Обратной» магической записи нет: двустороннее связывание (как v-model во Vue) собирается вручную парой value + onChange:

<input value={name} onChange={(e) => setName(e.target.value)} />

Явность этого цикла — осознанный выбор React: поток данных всегда прослеживаем.

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

Если про bind: методы классов теряют this при передаче колбэком — привязывают bind'ом в конструкторе или стрелочными полями; в хуках проблема отсутствует. Если про data binding: React — однонаправленное связывание, «двустороннее» для форм собирается явно из value + onChange.