React中onClick={alert('hi')}为何在渲染阶段触发？

嘿，这个问题问得特别到位，刚好戳中了React事件绑定里一个超容易踩的坑！我来给你拆解背后的逻辑：

先明确React事件绑定的核心要求 #

React的onClick这类事件属性，本质上是在等待一个函数引用——也就是说，当用户触发点击事件时，React会去调用这个传入的函数。它要的是“一个可以被执行的函数”，而不是“某个函数执行后的结果”。

正确写法为什么能正常工作 #

比如你写的：

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

这里传递给onClick的是一个箭头函数的引用。React在渲染组件的时候，只会把这个箭头函数“存起来”，并不会立刻执行它。只有当用户点击按钮时，React才会调用这个箭头函数，这时候函数内部的alert('hi')才会被触发。

如果是用命名函数的话，道理也是一样的：

function handleClick() {
  alert('hi');
}

<button onClick={handleClick}>Click me!</button>

这里handleClick是函数引用，不是函数调用，所以渲染时不会执行，只有点击时才会被React调用。

错误写法为什么会在渲染时执行 #

再看你疑惑的这个写法：

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

这里的alert('hi')是一个函数调用表达式，不是函数引用。当JavaScript在计算onClick属性的值时，它会立刻执行这个表达式——也就是马上弹出alert，然后把alert函数的返回值（undefined，因为alert没有返回值）赋值给onClick。

换句话说，你相当于写了：

// 渲染时先执行这行，弹出alert
const alertResult = alert('hi');
// 然后把undefined传给onClick
<button onClick={alertResult}>Click me!</button>

这时候onClick拿到的是undefined，自然点击按钮不会有任何反应，而且alert在渲染阶段就跑出来了。

一句话总结 #

• 给onClick传函数引用（不管是箭头函数还是命名函数的名字）：点击时执行逻辑。
• 给onClick传函数调用（比如alert()、fn()）：渲染时立刻执行函数，然后把返回值传给onClick，事件触发时不会有反应。

内容的提问来源于stack exchange，提问作者user9226007