在props中调用回调函数

Question

我对在元素的prop中调用callback有点困惑。

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

<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（）}}

这意味着“创建一个新函数，并将其传递给组件”。 这是我针对先前案例提到的问题的可能解决方案之一。

它的缺点是每次调用render时都会创建一个新函数。 创建函数本身非常轻巧，但这确实意味着Button组件可能会将其旧的onPress道具与新的onPress道具进行比较，看到它们已更改，因此认为它需要重新渲染。 这种额外的重新渲染可能是性能方面的考虑。

Answer 2

这两个是相同的。 在反应中，无需将参数提供给没有参数的函数。 另外，这需要在构造函数中进行事件绑定。

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

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

但是，此语法不需要在构造函数中进行显式绑定。 您正在使用箭头功能。

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