我有点困惑调用元素的道具回调。
假设我有一个按钮在这里。
<Button
onPress={() => { loadMore()}}
title="Load More"
backgroundColor='#0A55C4' />
是什么区别:
onPress={() => { this.loadMore()}}
onPress={this.loadMore()}
onPress={this.loadMore}
这些似乎都工作做好。但我不知道是否有他们之间的差异?谢谢
onPress = {this.loadMore()}
这一次很可能是一个错误。这意味着“立即拨打loadMore,并在通过其结果为道具到组件”。除非loadMore是一家工厂产生的其它功能,你可能不希望这样做。
onPress = {this.loadMore}
这意味着“通过装载更多到部件”。这往往是你想要的东西,但是当loadMore被调用时,this
将是不确定的,除非你已经采取措施来解决这个问题。例如,可以绑定功能,在你的构造函数,或创建为箭头的功能。
onPress = {()=> {this.loadMore()}}
这意味着,“创建一个新的功能,并把它传递到组件”。这是我对于前一种情况中提到的问题可能的解决方案之一。
它确实有,你将创建一个新的功能,每次渲染被称为下行。创建功能是对自己相当轻量级的,但它确实意味着Button组件可能比较旧onPress道具与新onPress道具,看到他们改变,因此认为它需要重新呈现。这额外的重新呈现可以是性能的考虑。
这两个是相同的。在反应,无需提供括号给函数不带参数。此外,这需要一个事件在你的构造结合。
onPress={this.loadMore()}
onPress={this.loadMore}
constructor() {
this.loadMore = this.loadMore.bind(this);
}
然而,这个语法并不需要在构造函数中显式绑定。您正在使用箭头功能。
onPress={() => { this.loadMore()}}