React Native组件回调函数

Question

在组件中，我看到了不同的回调方式。有什么区别：

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

和

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

Answer 1

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

正在调用一个新的匿名函数onPress，它将运行doSomething。

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

调用已经在类中定义的命名函数的引用。只有在使用类函数（我的意思是非ES6箭头函数）时才需要绑定到此。

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?

Answer 2

  

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

此代码块使用ES6 Arrow功能;这是在javascript中声明函数的另一种方式。此外，箭头函数中this的范围取决于创建函数的位置，而不是this的正常作用域规则，默认情况下取决于函数的调用方式。 / p>

  

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

此语句调用doSomething方法。但由于事件注册是在不同的元素上完成的，因此doSomething的范围不同，并且在javascript中使用bind方法强制绑定。

此外，在第二种方法中，您没有传递data参数，您可以使用第二个参数传递给方法，如下所示。

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