Вот почему нужно привязывать обработчики событий в компонентах класса в React: использование .bind()

Вот почему нужно привязывать обработчики событий в компонентах класса в React: использование .bind()

От автора: во время работы c React вы должны столкнуться с контролируемыми компонентами и обработчиками событий. Нам нужно связать эти методы с экземпляром компонента, используя React bind () в конструкторе пользовательского компонента.

В этой статье мы узнаем, зачем нам это нужно.

Всему виной JavaScript, не React

Ну, виновен звучит немного сурово. Не нужно никого обвинять из-за того, как работает React или из-за JSX. Это связано с тем, как this привязка работает в JavaScript.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Посмотрим, что произойдет, если мы не свяжем метод обработчика событий с его экземпляром компонента:

Запустите этот код, нажмите кнопку «Click Me» и проверьте консоль. Вы увидите undefined в консоли, как значение this изнутри метода обработчика событий. Метод handleClick() похоже, потерял свой контекст (экземпляр компонента) или this значение.

Как привязка this работает в JavaScript

Как я уже говорил, это происходит из-за того, как this привязка работает в JavaScript. Я не буду вдаваться в подробности в этом посте, но вот отличный ресурс, чтобы понять, как this связывание работает в JavaScript.

Но, что важно для нашего обсуждения здесь, значение this внутри функции зависит от того, как эта функция вызывается.

Привязка по умолчанию

Это простой вызов функции. Значение this внутри метода display() в этом случае — это окно — или глобальный — объект в нестрогом режиме. В строгом режиме this значение не undefined.

Неявное связывание

Когда мы вызываем функцию таким образом — перед объектом контекста — this значение внутри display() устанавливается равным obj.

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

В приведенном выше примере, когда мы вызываем outerDisplay(), мы не указываем объект контекста. Это простой вызов функции без объекта владельца. В этом случае значение this внутреннего display() возвращается к привязке по умолчанию. Он указывает на глобальный объект или undefined если вызываемая функция использует строгий режим.

Это особенно применимо при передаче таких функций, как колбеки другой пользовательской функции, сторонняя библиотечная функция или встроенная функция JavaScript, такая как setTimeout.

Рассмотрим определение типа setTimeout как показано ниже, а затем вызовем его.

Мы можем понять, что, когда мы вызываем setTimeout, JavaScript внутренне присваивает obj.display его callback аргумента.

Эта операция присваивания, как мы видели ранее, заставляет функцию display() потерять свой контекст. Когда этот callback в конечном итоге вызывается внутри setTimeout, this значение внутри display() возвращается к привязке по умолчанию.

Явное жесткое связывание

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

Теперь, когда мы вызываем outerDisplay(), значение this указывает на obj внутри display(). Даже если мы передадим obj.display в качестве колбека, this значение внутри display() будет правильно указывать на obj.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Воспроизведение сценария на одном JavaScript

В начале этой статьи мы увидели это в нашем компоненте React Foo. Если мы не связали обработчик событий с this, его значение внутри обработчика событий было установлено как undefined.

Как я упоминал и объяснял, это связано с тем, как this привязка работает в JavaScript и не связана с тем, как работает React. Итак, давайте удалим код, специфичный для React, и построим аналогичный пример для Java, чтобы имитировать это поведение.

Мы не моделируем фактические события и обработчики, но вместо этого мы используем синонимичный код. Как мы видели в примере React Component, this значение не undefined поскольку контекст был потерян после передачи обработчика в качестве обратного вызова — синонима операции присваивания. Это то, что мы наблюдаем здесь, в этом фрагменте JavaScript без повторения.

«Подожди минуту! Разве this значение не указывает на глобальный объект, так как мы запускаем его в нестрогом режиме в соответствии с правилами привязки по умолчанию?», вы можете спросить.

Нет. Вот почему:

Тела деклараций классов и выражений классов выполняются в строгом режиме, то есть конструктор, статические и прототипные методы. Функции Getter и setter выполняются в строгом режиме.

Таким образом, чтобы предотвратить ошибку, нам нужно связать this значение следующим образом:

Нам не нужно делать это в конструкторе, и мы можем сделать это и в другом месте. Рассмотрим код:

Но конструктор является оптимальным и наиболее эффективным местом для кодирования наших операторов привязки обработчика событий, учитывая, что здесь происходит вся инициализация.

Почему нам не нужно связывать «this» для стрелочных функций?

У нас есть еще два способа определить обработчики событий внутри компонента React.

Синтаксис Public Class Fields (экспериментальный)

Стрелочные функции в колбеке

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

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

В случае примера синтаксиса Public Class Fields стрелочная функция заключена внутри функции класса Foo или конструктора, поэтому контекст является экземпляром компонента, который мы хотим.

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

Короче говоря

В Class Components в React когда мы передаем ссылку функции обработчика события как обратный вызов, подобный этому

Метод обработчика событий теряет свой неявно связанный контекст. Когда событие происходит и вызывается обработчик, this значение возвращается к привязке по умолчанию и имеет значение undefined, так как объявления классов и методы прототипа выполняются в строгом режиме.

Когда мы привязываем this обработчик события к экземпляру компонента в конструкторе, мы можем передать его как обратный вызов, не беспокоясь о том, что он потеряет свой контекст.

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

Автор: Saurabh Misra

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по Курс по RxJS (Reactive-Extensions)

Прямо сейчас посмотрите курс по RxJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree