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

}

首先，我通过了＆＃39; this.clickme（）＆＃39;到onPress。它没有用。只有在取下牙箍后才开始工作。为什么？我们通常不会调用包含（）的函数吗？有时候，你必须以下面的格式传递它= {（）=＆gt; this.clickme（）}。为什么/当α

所以我们何时将函数称为：

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

谢谢。

Answer 1

简短回答：

你在问题中定义的

1和3对于Button.onPress实际上是相同的 - 它们传递对函数体的引用。但是，＃3也定义了一个新的内联函数，尽管它以非常轻量级的方式定义。＃2试图内联调用该函数。在某些需要将数字或布尔值或字符串值传递给属性而不是像Button.onPress所需的回调函数的情况下，您可能希望这样做（＃2）。

更长的答案：

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

由于您需要传入函数而不是结果，因此您不希望在函数名的末尾包含（）。括号将导致函数立即运行，而单独的名称将简单地传递对函数体的引用。该引用稍后将由Button.onPress调用以处理用户交互。

许多JavaScript（和React）都是用一种传递函数引用的模式编写的，后来在其他函数中调用这些函数。如果您不熟悉该模式，请务必花一些时间阅读回调模式。

() => {}也是定义内联匿名函数的简便方法。它被称为箭头函数，它可以比定义单独的函数体有一些性能提升。

更多信息：

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

1 个答案: