javascript - 在props中调用回调函数

关于在元素的prop中调用callback，我有点困惑。

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

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


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

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