javascript - react-native - 作为参数调用函数

Question

我隐隐怀疑这个问题可能更多地与 JavaScript 和/或特别是 ES6 相关，而不是 React-Native，但我会尝试。我有以下组件:

export default class Body extends Component {

  componentWillMount() {
    this.refresh();
  }

  clickme() {
    console.log('I have been pressed!!!!!');
  }

  refresh() {
    this.props.populateGrid();
  }
  render() {
    return (
      <View style={styles.body}>
        <Grid inGrid={this.props.grid} />
        <Button
          onPress={this.clickme}
          title={'PressMe'}
        />
      </View>
    );
  }

}

首先，我将“this.clickme()”传递给 onPress。它不起作用。只有在取下牙套后它才开始起作用。为什么？我们通常调用的函数不都是包含()的吗？有时，您必须以以下格式传递它:something={() => this.clickme()}。为什么/何时？

那么我们什么时候调用函数:

1. {this.clickme}
2. {this.clickme()}
3. {() => this.clickme()}

谢谢。

Answer 1

简短回答:

您在问题中定义的 1 和 3 对于 Button.onPress 实际上是相同的 - 它们传递对函数体的引用。然而，#3 还定义了一个新的内联函数，尽管它是以非常轻量级的方式定义的。 #2 尝试内联调用该函数。在某些情况下，您可能需要执行此操作 (#2)，即您需要将数字、 bool 值或字符串值传递给属性，而不是像 Button.onPress 所要求的那样传递回调函数。

更长的答案:

所需的语法由您在 react 组件上传递数据的方法的签名定义。在本例中，我们讨论的是 Button.onPress，它具有签名 () => {} ——这意味着它接受一个回调函数，并且在以下情况下不会向其传递任何参数:叫。您不想立即调用该函数，因为在您定义组件时用户没有单击。他们稍后会随机点击。

由于您需要传入函数而不是其结果，因此您不希望在函数名称末尾包含 ()。括号将使函数立即运行，而名称本身只会传递对函数体的引用。该引用稍后将由 Button.onPress 调用来处理用户交互。

许多 JavaScript(和 React)都是通过传递函数引用并随后从其他函数中调用这些函数的模式编写的。如果您不熟悉该模式，一定要花一些时间阅读有关回调模式的内容。

() => {} 也是定义内联匿名函数的简写方式。它称为箭头函数，与定义单独的函数体相比，它可以带来一些性能提升。

更多信息在这里:

• () => {} (arrow function) documentation on MDN
• Callback documentation on MDN