在组件中,我看到了不同的回调方式。有什么区别:
<MyButton onPress={ () => {doSomething(data)} }>
和
<MyButton onPress={ this.doSomething.bind(this) }>
在组件中,我看到了不同的回调方式。有什么区别:
<MyButton onPress={ () => {doSomething(data)} }>
和
<MyButton onPress={ this.doSomething.bind(this) }>
<MyButton onPress={ () => {doSomething(data)} }>
此代码块使用 ES6 箭头函数;这是在 javascript 中声明函数的另一种方式。此外,this
箭头函数的范围取决于函数的创建位置,而不是正常的范围规则,this
默认情况下取决于函数的调用方式。
<MyButton onPress={ this.doSomething.bind(this) }>
此语句调用doSomething
方法。但是由于事件注册是在不同的元素上完成的,所以作用域doSomething
不一样,是通过bind
javascript中的方法强行绑定的。
此外,在第二种方法中,您没有传递数据参数,您可以使用第二个参数将其传递给方法,如下所示。
<MyButton onPress={ this.doSomething.bind(this, data)} }>
<MyButton onPress={ () => {doSomething(data)} }>
正在调用一个新的匿名函数onPress
,该函数将运行doSomething
。
<MyButton onPress={ this.doSomething.bind(this) }>
正在调用对已在类中定义的命名函数的引用。仅当您使用类函数(我的意思是非 ES6 箭头函数)时才需要绑定到 this。
const doSomething = () => { ... }
不需要 a .bind(this)
,因为箭头函数绑定在词法作用域上。
您肯定应该阅读在 ReactJS 中绑定回调的最佳和最有效的方法是什么?在构造函数中或在渲染方法中还是作为属性初始值设定项?