javascript - 在React中调用函数

我是React的初学者，对于在React中调用函数有些困惑。

我看到了以下方法，但我不知道何时使用每种方法以及哪种方法。

handleAddTodo ={this.handleAddTodo}

handleAddTodo ={this.handleAddTodo()}

handleAddTodo ={handleAddTodo}

handleAddTodo ={this.handleAddTodo}

handleAddTodo ={handleAddTodo()}

这些可以互换吗？我可以通过调用函数的方式来处理事件吗？

最佳答案

简短答案:不可以。

让我们看看您发布的不同片段:
someFunction()和someFunction
使用前一种语法，您实际上是在调用该函数。后者只是对该功能的引用。那么我们什么时候使用呢？

当您要调用该函数并立即返回其结果时，可以使用someFunction()。在React中，这通常是在将JSX代码的一部分拆分为单独的函数时看到的。出于可读性或可重用性的原因。例如:

render() {
  myFunction() {
    return <p>Foo Bar</p>;
  }
  return (
    <div>
      {myFunction()}
    </div>
  );
}

如果只想将对该函数的引用传递给其他对象，则可以使用someFunction。在React中，这通常是一个事件处理程序，它通过props传递给另一个子组件，以便该组件可以在需要时调用该事件处理程序。例如:

class myApp extends React.Component {
  doSomething() {
    console.log("button clicked!");
  }
  render() {
    return (
      <div>
        <Button someFunction={this.doSomething} />
      </div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.someFunction}>Click me</button>
    );
  }
}

someFunction()和this.someFunction()
这与功能的上下文有关。基本上，“此功能在哪里？”。是当前组件的一部分，然后使用this.someFunction()，是否是作为 Prop 传入的父组件的一部分，然后使用this.props.someFunction()。它是当前方法内部的一个函数，然后只需使用someFunction()即可。

显然，还有更多的东西，但这是我能给出的最好的基本总结。

为了更好地理解，请阅读here。它是this关键字如何在Javascript中，特别是在React中工作的极好的指南。