React Native 组件回调函数

Question

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

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

和

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

正在调用对已在类中定义的命名函数的引用。仅当您使用类函数（我的意思是，非 ES6 箭头函数）时，才需要绑定到此函数。

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

不需要.bind(this)，因为箭头函数绑定在词法作用域上。

您绝对应该通读在 ReactJS 中绑定回调的最佳和最有效的方法是什么？在构造函数中还是在呈现方法中，还是作为属性初始值设定项？