React Native组件回调函数

Question

在组件中,我看到了不同的回调方式.有什么区别:

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

和

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

Answer 1

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

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

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

此语句调用doSomething方法。但是由于事件注册是在不同的元素上完成的，所以 ScopedoSomething是不同的，并且是通过bindjavascript 中的方法强制绑定的。

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

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

Answer 2

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

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

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

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

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

不需要a .bind(this),因为箭头函数绑定在词法范围上.