Правильность использования функции JS?

Question

[anayks]

Добрый день.

У меня есть пример два примера функций в блоке JSX:

Первый:

<div onClick={() => this.onClick(35)}>
</div>

И второй:

<div onClick={this.onClick.bind(this, 35)}>
</div>

Контекст обоих данных примеров будет привязан к родительскому компоненту.
Но какой из этих вариантов более правилен в принципе? Ссылка на анонимную функцию внутри компонента или bind?

Answer 1

[askhat]

Действительно, примеры кода эквивалентны (если не брать в расчёт то, что число 35 должно быть вторым аргументом функции bind, вероятно вы опечатались).

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

Comments

[anayks]

Спасибо за ответ.
На всякий случай исправил, если у людей будут вопросы. :)

[askhat]

anayks, ну и раз уж на то пошло, то в рендер функции нет доступа к окружению где её определили (собственно по этому и происходит вся это свистопляска с биндом и стрелками). Биндить функции нужно в конструкторе:

class SomeComponent extends React.Component {
  constructor() {
    this.handleSomething = this.handleSomething.bind(this)
  }
  handleSomething() {
    doSomething()
  }
  render() {
    return <div onSomething={handleSomething} />
  }
}

[askhat]

Либо со стрелочной функцией

class SomeComponent extends React.Component {
  handleSomething = () => {
    doSomething()
  }
  render() {
    return <div onSomething={handleSomething} />
  }
}

[anayks]

Асхат Бикметов, да, всё верно

Я сам пользуюсь вторым вариантом, и заметил первый у человека, который мне скидывал примеры кода.

Как я понимаю, разницы особой и нет, просто реализация разная.

Спасибо ещё раз :)