Реагенты Функции обратного вызова собственных компонентов

Question

В компонентах я видел разные способы выполнения обратных вызовов. В чем разница между:

<MyButton onPress={() => {doSomething(data)} }> 

и

<MyButton onPress={ this.doSomething.bind(this) }> 

Answer 1

<MyButton onPress={() => {doSomething(data)} }>

Этот блок кода использует функцию ES6 Arrow; который является другим способом объявления функции в javascript. Кроме того, область действия функции в функции стрелки зависит от того, где была создана функция, в отличие от обычного правила области видимости this, которое по умолчанию зависит от , как функция была вызвана.

<MyButton onPress={ this.doSomething.bind(this) }>

Это утверждение делает вызов doSomething метода. Но поскольку регистрация события выполняется на другом элементе, область doSomething отличается и принудительно привязана с использованием метода bind в javascript.

Кроме того, во втором методе вы не передаете параметр данных, который вы можете передать с помощью второго аргумента методу, показанному ниже.

<MyButton onPress={ this.doSomething.bind(this, data)} }>

Answer 2

<MyButton onPress={() => {doSomething(data)} }> 

называет новую анонимную функцию onPress, которая будет работать doSomething.

<MyButton onPress={ this.doSomething.bind(this) }> 

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

const doSomething =() => { ... } 

не потребуется .bind(this), поскольку стрелка функция свяжет на lexical scope.

Вы должны обязательно читать более What is the best and most efficient way to bind callbacks in ReactJS? In the constructor or in the render method or as a property initializer?