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

Question

[Иван Гришов]

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

Есть пример со счетчиком на 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/...

Comments

[pLavrenov]

Эту версию реакта можно выбросить в мусорку она устарела.

[Иван Гришов]

pLavrenov, эта привязка используется не только в реакте, но и в чистом в javascript в классах, хочется понять этот момент.

[pLavrenov]

Иван Гришов, в js это тоже устарело, сейчас используются стрелочные функции которые исправили это уже давным давно. Методы класса не привязывались к контекcту экземпляра класса.

Answer 1

[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 с места вызова - внутри конструктора