@IvanGrishov
Начинающий Frontend разработчик

Почему теряется контекст this в классовом компоненте React?

Здравствуйте. Подскажите пожалуйста, до меня не доходит.

Есть пример со счетчиком на React. Я не могу понять, зачем здесь нужно привязывать контекст через bind,
в коде, в примере, это вот эти строчки:

this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);

Ведь эти методы находятся в этом классе, у которого контекст this, зачем его еще нужно привязывать и почему он теряется. В этом случае куда смотрит this? Разве на не сам класс? Или он смотрит на кнопки, где вызываются методы increment и decrement?
Спасибо за ответ.

https://codesandbox.io/s/counter-y8bowl?file=/src/...
  • Вопрос задан
  • 77 просмотров
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Методы класса, объявленные таким образом, лежат в прототипе (каждый такой метод будет общий для всех экземпляров). Они созданы и существуют ещё до того, как будут созданы экземпляры класса. Соответсвенно, this внутри них не может сам по себе указывать на экземпляр, только если не задать его явно - при вызове через точку, через квадратные скобки, или с помощью call/apply/bind.

Можно объявить методы как стрелочные функции - это современный подход.
class ClassCounter extends React.Component {
...
  increment = () => {
    console.log(this);
    this.setState({ count: this.state.count + 1 });
  };

что практически то же самое, как если бы ты прямо в конструкторе написал
class ClassCounter extends React.Component {
  constructor(props) {
    super(props);
    this.increment = () => {
      console.log(this);
      this.setState({ count: this.state.count + 1 });
    };
  }

то есть такие методы создаются в момент создания экземпляра (на каждый экземпляр заново создается каждый стрелочный метод), ну и автоматически биндят this по правилам стрелочных функций, то есть this с места вызова - внутри конструктора
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы