Объявление обработчика событий в React через упрощенный синтаксис — что делает эта строка кода? Как гуглить подробности об этом?

Question

[bormor]

Изучаю реакт. Нашел удобный вариан объявления обработчика событий.
(без использования constructor и bind).

handleClick = (event) =>{
    ...
};

Что это?
Напоминает function expression через стрелку-функцию. Но нет const.
Это новая возможность JS? Или магия React?
Как гуглить детали об этом?

Answer 1

[kn1ght_t]

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

это просто удобно, когда в методах используется что-нибудь с "this", например:
this.setState({...});

Answer 2

[alvvi]

Сворую ссылочку которой недавно Антон Спирин делился, собственно вот во что генерируется такой код. Строки 23-28.
А источник этой магии вот в этом proposal

Comments

[bormor]

Спасибо. Кстати можно этим уже смело пользоваться? Нет шансов, что это черновик и его не утвердят?

[alvvi]

bormor, в данный момент Stage 3, все возможно, но сомневаюсь.

Answer 3

[Максим]

> Но нет const.
Вы объявляете МЕТОД (по теории: если свойство объекта - функция, то такое свойство называется методом), поэтому здесь не должно быть const.

По старому стилю:

var myObj = {
  name: 'Toster', // корректно, это свойство объекта
  myFunction: function() { ... }, // корректно, это метод объекта
  var myAnotherFunction: function() { ... } // не корректно, так писать нельзя, следовательно, и const не нужен
}

Comments

[bormor]

т.е. это обычный метод класса, только без своего this ?

class Demo{
     method( ){  
         ...
     }
}

[bormor]

И кстати можно им уже смело пользоваться? Нет шансов, что это черновик и его не утвердят?

[Максим]

bormor, пользуйтесь смело.
Про this: вы когда кликаете на кнопку, событие всплывает в контексте this, которое указывает куда?) правильно - на window (глобальный объект браузера, но в реакте это показывается как null, так что я могу тут чуть-чуть ошибаться), у него (у window), например, нет setState, следовательно, когда вы пишите this.setState (происходит window.setState / или null.setState) - что приводит к ошибке. А если вы используете жирную стрелочную функцию ( то есть ту запись метода, что вы скинули в вопросе) - то функция вызывается в контексте this компонента, потому что под капотом, она использует метод bind.