在 ReactJS 中使用“this”关键字调用函数答案

【问题标题】：Invoking functions with "this" keyword in ReactJS在 ReactJS 中使用“this”关键字调用函数
【发布时间】：2019-05-26 12:10:02
【问题描述】：

下面是来自 codecademy 的一个 sn-p 代码。我是 Javascript 和 React 的新手，所以我只想问一下为什么 this.myFunc 之后不需要括号。我认为在 Javascript 中调用函数需要括号。这是 React 特定的，还是我在这里遗漏了什么？

谢谢！

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }
  render() {
    return (
      <div onHover={this.myFunc}>
      </div>
    );
  }
}

【问题讨论】：

调用函数确实需要括号，但您不希望函数在悬停事件发生之前执行。
Difference between (function(){})(); and function(){}();的可能重复
这个总结得很好...stackoverflow.com/questions/20485425/…

标签： javascript reactjs

【解决方案1】：

如果一个函数用括号编写，它将在渲染时调用，而没有括号的函数只是对该函数的引用，不会自调用而是等待悬停事件发生。

<div onHover={this.myFunc()}> // Calls the myFunc function and invokes it on render

<div onHover={this.myFunc}> // References the myFunc function and invokes it on hover

【讨论】：

【解决方案2】：

当您调用函数时，您将设置 onHover 以返回该函数的值，在这种情况下未定义，因为您的函数不返回任何内容。您想将 onHover 事件绑定到函数本身而不是返回值。

【讨论】：

【解决方案3】：

当用户悬停时，React 将为您处理调用该函数。在这种情况下，如果您将其更改为 <div onHover={this.myFunc()}> 该函数将在渲染时运行，如果该函数返回一个函数，则返回的函数将在悬停时运行。这不是你想要的。

这是 JavaScript 的一个有用功能，可以为另一段代码提供稍后运行的功能。

例如：

setTimeout(myFunc, 1000);

function myFunc() {
    console.log("1 second has passed");
}

我不希望myFunc 立即运行。只有在超时完成后。所以我让setTimeout 为我调用它。

【讨论】：