传递函数样式之间的差异

Question

这些函数调用样式之间有什么区别？

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

和

onPress = { this.myFunctions() }

Answer 1

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

您正在传递一个匿名函数，该函数在调用onPress之后将调用this.myFunctions()

onPress={this.myFunctions()}

您正在传递给onPress this.myFunctions的返回值，这意味着每次组件调用渲染时都会执行此返回值。

以上两种将函数传递到React组件中的方式均不建议在性能上使用。使用上述方法会使每次onparent呈现时带有onPress的函数重新呈现，因为对先前的匿名函数声明进行浅表比较时，将导致两个函数在引用比较时不相等。

建议在以下使用：

onPress={this.myFunctions}

传递函数myFunctions的引用的位置。并且每当父项重新渲染时，一旦组件检查新的myFunctions是否与先前的渲染相同，它将返回true，并且不会再次渲染子项。

Answer 2

您可以同时使用

onPress={() =>{this.myFunctions()}}
//and
onPress={this.myFunctions} // without ()

如果要传递参数，则应使用第一个。

onPress={(e) =>{this.myFunctions(id, e)}}

Answer 3

这里有很大的不同。

onPress={this.myFunctions()}

上面的用法表示评估 myFunctions的结果并在印刷时使用 result 。仅当myFunctions()返回另一个函数时，这才有意义。

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

上面的意思是当触发onPress时，然后 myFunctions被运行。

Answer 4

不，只要它是一个函数就没有真正的区别-尽管第二种方法中没有()（括号）：

onPress={this.myFunctions}

如果需要参数：

onPress={e => this.myFunctions(e)}