反应本机和箭头功能答案

【问题标题】：React native and arrow functions反应本机和箭头功能
【发布时间】：2018-12-14 04:41:54
【问题描述】：

在 React for web 中，为了提高性能，我们不应该在 onPress、onClick 等情况下使用箭头函数。

这条规则对 React Native 也有效吗？

【问题讨论】：

RN 的 JS 部分仍然只是 JS 并且受制于相同的条件。它们的使用是否会导致性能不佳是高度依赖于上下文的，例如，你有一些箭头函数作为处理程序可能永远不会重要。

标签： reactjs performance function react-native arrow-functions

【解决方案1】：

“学习一次，随处写作”。 JavaScript，如果还没有的话，即将成为所有比赛的赢家。 React-Native 是另一个漂亮的 JavaScript 库（有些人更喜欢“框架”）。由于它是 JavaScript，因此 RN 的规则和条件与任何其他 JS 库的规则和条件相同。

性能不是这里比较的重点。其实无论如何都不应该比较。这是代码的有效性和可读性。胖箭头函数是最相关的变化 JS 范式之一。它们允许调用匿名函数并通过更改this 绑定到函数的方式来处理现有的范围困境。例如onPress = {this.onButtonPress.bind(this)} 简单地变成onPress = {() => this.onButtonPress}。如果你仍然觉得声明一个函数很乏味，你可以这样做

onPress = {() => { this.props.navigation.navigate('HomePage') }}

虽然这不应该是您通常的做法，但为了节省时间和更快地编写代码，而应采用传统方式。

【讨论】：

我不清楚您实际上是如何回答这个问题的。与其使用一堆不相关的文本，不如直接解决问题，通过提供“传统方式”（无论您认为是什么）与“新方式”相比的示例，然后解决潜在问题：应该这样做，以及为什么。

【解决方案2】：

使用箭头函数作为类属性是理想的，因为它不会创建自己的范围。

如果您在生命周期方法（例如渲染）中有箭头函数，它确实会降低代码的效率，因为每次调用该方法时您都会创建一个新函数，但这没关系，因为性能下降会可以忽略不计。

【讨论】：

它是否成为性能问题取决于组件重新渲染的频率、页面上有多少组件等，与 React 相同。跨度>

【解决方案3】：

两者都有各自的原因。性能问题不大。通常React-Native 应用程序一直使用箭头功能。这取决于要求。例如，如果您有一个按钮，并且在其 onPress 道具上，最好传递一个箭头函数，因为它不需要绑定。如果您需要引用定义它的this，您应该使用普通函数（而不是箭头函数）。箭头函数也非常灵活，您应该利用这些优势。所以，如果你需要this，我建议使用箭头函数和普通函数。我个人仅在需要 this 时才使用普通功能。

【讨论】：