在渲染时调用 onClick={alert('hi')} 的原因

Question

我知道这不是让按钮在点击时显示警报的正确方法。

我想了解这背后的逻辑。我知道点击时需要获得对函数的引用才能按预期运行。

在以下示例中，引用了将在单击时调用的箭头函数：

<button onClick={() => alert('hi)}>Click me!</button>

但是在这种情况下，幕后会发生什么：

<button onClick={alert('hi)}>Click me!</button>

为什么 onClick 内部的语句在渲染时被评估？

编辑：我正在使用 React。

Answer 1

想象一下你有一个这样的方法：

function getString(){

   return "string";
}

然后定义一个文本框：

<input type="text" value={getString()}/>

您会期望文本框的呈现值是“string”而不是“getString()”。这是因为花括号内的内容是在 render 方法中计算的。

当{alert('hi)}被评估时，它会运行该方法，因此分配给 onclick 事件的是alert('hi')（无）返回的内容，而不是方法本身。