onClick={handle()}为什么一渲染就执行？

一、根本机制：JSX 大括号内的立即求值

在编写 React 组件时，许多初学者直觉地认为 onClick={handle()} 像原生 HTML 中的 onclick="handle()" 一样，只会在按钮被点击时才去唤起执行。然而在 React 体系中，JSX 绝非原生 HTML 字符串，而是在构建与渲染阶段直接被 Babel 或 SWC 编译成普通 JavaScript 对象创建语句的代码。

考虑以下两行看似相似的代码差异：

// 写法 A：传递函数引用（正确）
<button onClick={handle}>点击提交</button>

// 写法 B：带圆括号调用（产生误执行）
<button onClick={handle()}>点击提交</button>

根据 JavaScript 语言规范，函数调用表达式 fn() 的求值时机是当前行代码执行的当下。当组件开始渲染时，React 会依次计算所有的属性值，将 handle() 的执行结果作为属性传入。由于大多数事件处理函数没有显式 return 语句，其默认返回值是 undefined，这导致实际挂载到虚拟 DOM 上的结构等价于 <button onClick={undefined}>。

二、底层视角：JSX 转译为 createElement 的过程

为了看清本质，我们可以观察 JSX 经由转译工具编译后的原生 JavaScript 代码。在经典的 React 转换或现代的 JSX 运行时中，JSX 标签会被转换为函数调用：

// 源码
const element = <button onClick={handle()}>确认</button>;

// 编译后的原生 JavaScript (React 17+ jsx 运行时)
import { jsx as _jsx } from "react/jsx-runtime";

const element = _jsx("button", {
  onClick: handle(), // 注意此处：这是一个作为对象实参传递的函数调用！
  children: "确认"
});

在原生 JavaScript 函数传参中，任何作为参数的表达式都会在外部函数进入之前被先行计算。例如在执行 Math.max(1 + 2, 5) 时，引擎必然先计算 1 + 2 得到 3，再将 (3, 5) 送入 Math.max。同理，在 _jsx 接收属性对象之前，handle() 已经完成了执行。

这意味着：你不是在设置点击触发器，而是在渲染组件的同时命令浏览器立刻执行该函数。

从图 1 可以清晰看到，当省略小括号使用 onClick={handle} 时，JavaScript 引擎仅取出了 handle 在内存中的引用地址，原封不动存放在属性对象中，直到真实的用户点击事件被派发，React 的事件委托系统才会从属性中取出该引用并调用。

三、最致命的隐患：触发 setState 导致无限死循环

如果 handle 仅仅是一段打印日志的逻辑（如 console.log("hello")），带括号的写法造成的表面现象是：组件每次挂载或重新渲染时控制台多打印一行日志，而真实点击按钮时没有任何动静。

但如果 handle 内部包含更新状态的操作，程序就会陷入灾难性的死循环：

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  // 严重错误：在渲染中直接触发 handleClick()
  return (
    <button onClick={handleClick()}>
      当前计数：{count}
    </button>
  );
}

如图 2 所示，这个死循环之所以形成闭环，是因为其执行流转没有任何异步等待节点：

1. 组件执行渲染主流程，运行到 JSX 返回值。
2. 由于 handleClick() 带有圆括号，立刻触发执行。
3. handleClick 内部执行 setCount(count + 1)。
4. React 接收到新的状态变动，立刻安排组件进行下一轮重新渲染。
5. 组件重新渲染，再次解析到 handleClick()，再次触发 setCount。
6. 步骤不断循环往复，直到触碰保护上限被强行截断。

四、常见场景与标准写法指南

在实际业务开发中，我们对事件处理的需求通常分为三类。根据是否需要传递自定义参数，对应的正确写法如下：

场景一：无需传参，直接传递函数引用

如果事件处理函数只需要接收默认的 React 合成事件对象（SyntheticEvent）或者不需要任何参数，直接写上函数名即可：

function SubmitButton() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log("表单已提交");
  }

  // 严禁加小括号：直接传递 handleSubmit 即可
  return <button onClick={handleSubmit}>提交数据</button>;
}

场景二：需要传递自定义参数，使用内联箭头函数包装

最容易让开发者误加小括号的场景是在列表循环中需要传递特定 ID。此时若写成 onClick={deleteItem(item.id)}，会在渲染每一行数据时把所有项立刻删光。正确做法是用一个没有参数的小箭头函数将其包裹：

function ItemList({ items, onDelete }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.name}
          {/* 正确写法：包裹一层匿名箭头函数 */}
          <button onClick={() => onDelete(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

为什么这样写不会在渲染时执行？因为 () => onDelete(item.id) 本身是一个函数声明表达式。在渲染时，JavaScript 只是创建了一个新的匿名函数对象赋给 onClick，而箭头内部的 onDelete(item.id) 只有在该匿名函数被用户点击触发时才会执行。

场景三：高阶函数（柯里化传参）

除了内联箭头函数，如果希望保持 JSX 的清爽，或者需要预置统一的工厂处理逻辑，可以使用柯里化（Currying）高阶函数：

function UserManagement() {
  // 高阶函数：外层接收业务参数，内层返回事件处理回调
  const handleDelete = (userId) => (event) => {
    console.log("正在处理用户：", userId);
  };

  // 此时写小括号是完全合法的！因为 handleDelete("u101") 的求值结果是一个函数
  return <button onClick={handleDelete("u101")}>注销用户</button>;
}

五、容易混淆的认知误区辨析

六、事件绑定排查与决策速查

当你准备在 React 中编写一个事件处理函数，或者在控制台遇到类似的一渲染就报错的问题时，可以参考以下决策路径进行排查：