在 React 中调用函数

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

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

• handleAddTodo ={this.handleAddTodo}
• handleAddTodo ={this.handleAddTodo()}
• handleAddTodo ={handleAddTodo}
• handleAddTodo ={this.handleAddTodo}
• handleAddTodo ={handleAddTodo()}

这些可以互换吗？我可以像调用函数一样处理事件吗？

这些可以互换吗？

简短回答：不。

让我们看一下您发布的不同片段：

someFunction() vs 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() vs this.someFunction()

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

显然，还有很多内容，但这是我能给出的最好的基本总结。

为了更好地理解，请阅读here https://gist.github.com/amitai10/adb66d6faa714e8c3cdb94946bb98356。这是关于如何this关键字在 Javascript 中尤其适用于 React。