正在调用props中的回调函数

Question

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

假设我这里有一个按钮。

<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

这两个是相同的。在react中，无需为没有参数的函数提供parens。此外，这需要在构造函数中进行事件绑定。

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

但是，这种语法不需要构造函数中的显式绑定。您正在使用箭头函数。

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

https://reactjs.org/docs/handling-events.html