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

Взгляните на эти две части кода:

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={(e) => this.goToStore(e)}>test</button>
  }
}

против

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={this.goToStore}>test</button>
  }
}

Что я знаю, так это:

в обеих версиях мы успешно заканчиваем в методе goToStore, потому чтоthis внутриrender() метод автоматически связывается (с помощью React) с экземпляром компонентапервый из-за этоговторой сбой, потому что методы класса в es6 не привязаны к экземпляру компонента, что позволяетthis в методеundefined

Теоретически в первом варианте, насколько я понимаю, происходит следующее:

обработчик нажатия кнопки является анонимнымстрелка функция, поэтому всякий раз, когда я ссылаюсьthis внутри он поднимаетсяthis из окружающей среды (в данном случае изrender())тогда он вызываетgoToStore метод, это регулярная функция.потому что вызов, кажется, соответствует правилам неявного связывания (object.function()) object будет объектом контекста, и в таких вызовах функций он будет использоваться какthisтак, внутриgoToStore Метод лексически подобранный (используемый как объект контекста) правильно разрешит экземпляр компонента

Я чувствую, что 3. и 4. здесь не тот случай, потому что тогда это относится к случаю 2.:

<button onClick={this.goToStore}>test</button>

Также сthis контекстный объект.

Что происходит именно в этом конкретном случае, шаг за шагом?