为什么事件处理程序需要引用而不是调用？

Question

在React教程中，它说

这样做onClick={alert('click')}会立即发出警报，而不是在单击按钮时发出警报。

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

但是，我不明白为什么会这样…任何人都可以为我澄清一下吗？为什么不能将函数调用作为处理程序传递？

Answer 1

当您执行onClick={alert("click")}此操作时，将调用该alert函数并将返回的值（undefined）分配给该onClick属性。所以，React看到的是这样onClick={undefined}说的：
嗯，那不是一个函数，为什么我要添加这样的处理程序？

您要传递的onClick是一个函数，而不是undefined。

因此，您必须做：可以像您提到的那样onClick={myFunction}在哪里，也可以用来创建类似的函数：myFunction``() => alert("...")``bind

onClick={alert.bind(window, "click")}

bind将 返回 一个 新函数 ，该alert函数将在内部使用"click"参数调用该函数。

当您这样做时，情况与此类似setTimeout(() => alert("after 1 second"), 1000)。setTimeout期望功能。如果这样做setTimeout(alert("..."), 1000)，alert确实会调用，但是setTimeout会作为第一个参数接收undefined（即alert返回的内容）。

相反，如果您有一个 返回函数的函数 ，它将起作用：

// This will be called first and will return a function
const sayHelloTo = name => {
   // This will be the function passed to `setTimeout`
   return () => alert(`Hello ${name}`);
};
setTimeout(sayHelloTo("Alice"), 1000);

您可以用相同的方式来处理问题onClick：

onClick={sayHelloTo("Alice")}

这是关于后台发生的事情的一个非常小的例子（这只是概念的证明，我确定实际发生的事情比这要好得多）：

const elm = {
  onClick: null,
  // The click method can be invoked manually
  // using `elm.click()` or is natively invoked by the browser
  click () {
     if (typeof this.onClick === "function") {
        this.onClick();
     }
  }
};

// If you do:
elm.onClick = alert("click"); // this calls the alert, and returns undefined
elm.onClick === undefined // true

// But when doing:
elm.onClick = () => alert("click");
typeof elm.onClick // "function"

elm.click(); // this will call the alert