ReactJSTips: Анонимная функция

Передавать callback в компоненты можно разными способами и не каждый может быть верным. Я исходил из «best practices» от Airbnb и из своего опыта и делюсь тем, как правильно пробрасывать методы в ваши компоненты.

# Анонимная функция (передача аргументов вручную)

// ✅ GOOD
<Button onClick={removeItem.bind(this, id)}>Удалить</Button>

// ❌ BAD
<Button
  onClick={() => {
    removeItem(id);
  }}>
  Удалить
</Button>

Старайтесь не создавать анонимную функции, для передачи данных в другую функцию в «функциональном компоненте (stateless component)». Для подобной ситуации, используйте метод — .bind().

Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.

В onClick передавайте функцию removeItem с привязкой контекст и новых аргументов.

Подробнее о .bind(): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

# Анонимная функция (передача аргументов по умолчанию)

// ✅ GOOD
<Input onChange={this.props.onChange} />

// ✅ GOOD
<Input onChange={this.props.onChange.bind(this, 'myField')} />

// ❌ BAD
<Input onChange={value => this.props.onChange(value)} />

В данном случае, метод onChange автоматически передаст value первым аргументом в функцию this.props.onChange.

Если же вы хотите добавить дополнительные аргументы, после value, пробрасывайте их через .bind(this, ...). В итоге, onChange получит 2 значания — введённое значение пользователем и строку myField.

# Переопределение контекста this в конструкторе

// ✅ GOOD
class App extends React.Component {
  constructor() {
    super();
    this.myMethod = this.myMethod.bind(this);
  }
  myMethod() {
    ...
  }
  render() {
    return <Button onClick={this.myMethod}></Button>;
  }
}

// ❌ BAD
class App extends React.Component {
  constructor() {
    super();
  }
  myMethod() {
    ...
  }
  render() {
    return <Button onClick={this.myMethod.bind(this)}></Button>;
  }
}

Верным решением для компонента-класса, будет переопределять контекст this внутри конструктора.