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时，function createListener(j) { return function () { main(circle[j]) } } // and use it in your 'for' loop later: circle[i].elem.addEventListener('click', createListener(i));将是未定义的，除非您已采取步骤进行修复。例如，您可以在构造函数中绑定该函数，或将其创建为箭头函数。

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()}}

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

在props中调用回调函数

2 个答案: