在调用道具回调函数

Question

我有点困惑调用元素的道具回调。

假设我有一个按钮在这里。

<Button
  onPress={() => { loadMore()}}
  title="Load More"
  backgroundColor='#0A55C4' />

是什么区别：

onPress={() => { this.loadMore()}}

onPress={this.loadMore()}

onPress={this.loadMore}

这些似乎都工作做好。但我不知道是否有他们之间的差异？谢谢

Answer 1

onPress = {this.loadMore（）}

这一次很可能是一个错误。这意味着“立即拨打loadMore，并在通过其结果为道具到组件”。除非loadMore是一家工厂产生的其它功能，你可能不希望这样做。

onPress = {this.loadMore}

这意味着“通过装载更多到部件”。这往往是你想要的东西，但是当loadMore被调用时，this将是不确定的，除非你已经采取措施来解决这个问题。例如，可以绑定功能，在你的构造函数，或创建为箭头的功能。

onPress = {（）=> {this.loadMore（）}}

这意味着，“创建一个新的功能，并把它传递到组件”。这是我对于前一种情况中提到的问题可能的解决方案之一。

它确实有，你将创建一个新的功能，每次渲染被称为下行。创建功能是对自己相当轻量级的，但它确实意味着Button组件可能比较旧onPress道具与新onPress道具，看到他们改变，因此认为它需要重新呈现。这额外的重新呈现可以是性能的考虑。

Answer 2

这两个是相同的。在反应，无需提供括号给函数不带参数。此外，这需要一个事件在你的构造结合。

onPress={this.loadMore()}
onPress={this.loadMore}

constructor() {
    this.loadMore = this.loadMore.bind(this);
}

然而，这个语法并不需要在构造函数中显式绑定。您正在使用箭头功能。

onPress={() => { this.loadMore()}}