引言
本文将从这个 bug 出发，层层深入，帮助你彻底搞懂这两个概念，并在实际项目中正确运用，理解了 JavaScript 中函数引用与函数执行的区别，也让我对“函数是一等公民”这一特性有了更真切的体会。
一、问题重现与排查
1.1 现象
<Button onClick={() => onAdd}>新增</Button>
点击按钮，没有任何反应。
1.2 排查
() => onAdd 是一个箭头函数，它的函数体是 onAdd，没有括号。根据箭头函数的语法：
() => onAdd
// 等价于
() => { return onAdd }
点击按钮时，React 调用了这个箭头函数，它只是返回了 onAdd 函数对象本身，返回值被丢弃，onAdd 从未被执行。因此按钮“失灵”。
1.3 正确写法
两种修复方式：
// ✅ 直接传递函数引用，React 会在点击时调用它
onClick={onAdd}
// ✅ 在箭头函数中显式调用
onClick={() => onAdd()}
二、函数引用 vs 函数执行：核心区别
在 JavaScript 中，函数可以像普通值一样使用，因此产生了两个不同的概念：
| 术语 | 写法 | 含义 | 执行时机 |
|---|---|---|---|
| 函数引用 | fn | 把函数本身作为值传递，不执行 | 稍后由别人调用 |
| 函数执行 | fn() | 立即执行函数，并获取返回值 | 代码执行到这一行时立即执行 |
四种常见写法对比
| 写法 | 结果 | 原因 |
|---|---|---|
onClick={onAdd} | ✅ 点击时触发 | 传递函数引用，React 点击时调用 |
onClick={() => onAdd()} | ✅ 点击时触发 | 箭头函数内部调用 onAdd() |
onClick={() => onAdd} | ❌ 点击无反应 | 箭头函数返回 onAdd 引用，但未调用 |
onClick={onAdd()} | ❌ 渲染时立即执行，点击无效 | 渲染时执行 onAdd()，返回值（可能是 undefined）传给 onClick |
关键：有没有
()决定了你是传递函数本身，还是立即执行它。
三、为什么会有这种区别？—— 函数是一等公民
JavaScript 中，函数是一等公民（First-Class Citizen）。这意味着函数和普通值（数字、字符串、对象）享有完全相同的待遇：
- 可以赋值给变量
- 可以作为参数传递
- 可以作为返回值
- 可以存入数组或对象
// 数字可以赋值
const a = 42;
// 函数也可以赋值
const add = (x, y) => x + y;
// 数字可以作为参数
Math.abs(-5);
// 函数也可以作为参数
<Button onClick={handleClick} />;
// 函数可以作为返回值
function createLogger(prefix) {
return (message) => console.log(prefix, message);
}
// 函数可以存入数组
const handlers = [handleEdit, handleDelete];
正是因为函数可以像值一样被传递，我们才需要区分“函数本身”（引用）和“调用结果”（执行）。如果函数不是一等公民（例如在 Java 中，需要借助接口或函数式接口才能传递行为），就不会有这种混淆。
四、项目实战：如何正确选择
在真实项目中，我们需要根据场景决定是传递函数引用，还是用箭头函数包裹执行。
4.1 事件处理 —— 无需额外参数
应传递函数引用，简洁且性能更优。
// layouts/default/index.tsx
const toggleCollapsed = () => { ... };
<Button onClick={toggleCollapsed}>切换</Button>
4.2 事件处理 —— 需要传递参数
必须用箭头函数包裹，否则会在渲染时立即执行。
// views/channel/cdn/entity.tsx
const handleEdit = (record) => { ... };
<Button onClick={() => handleEdit(record)}>编辑</Button>
常见错误：onClick={handleEdit(record)} → 渲染时就会执行，点击无效。
4.3 useEffect、useCallback 等 Hook 参数
必须传递函数引用，不能直接调用。
// layouts/default/components/Siderbar.tsx
useEffect(() => {
// 副作用逻辑
}, [roles]); // ✅ 正确，传递函数引用
// ❌ 错误：useEffect(fn(), []) 会导致立即执行，返回值传给 useEffect
// views/trends/release/components/filter/index.tsx
const handleFilterChange = useCallback((key, value) => {
// ...
}, [filterValues]); // ✅ 正确，传递函数引用
4.4 高阶函数模式
立即执行高阶函数，获取返回的函数引用，再交给组件。
// views/manage/aigc/list/entity.tsx
// 高阶函数定义：返回一个渲染函数
const renderActionColumn = (handleEdit, handleUp, handleDown) => {
return (_, record) => ( /* 渲染操作按钮 */ );
};
// 使用：立即执行 renderActionColumn，返回值是一个函数引用，传给 render
<Column render={renderActionColumn(handleEdit, handleUp, handleDown)} />
4.5 回调需要额外固定参数
用箭头函数包裹，将组件传入的值与固定参数结合。
// views/trends/release/components/filter/index.tsx
<Select onChange={(value) => handleFilterChange('channel', value)} />
五、常见错误速查表
| 需求场景 | 正确写法 | 错误写法（及其后果） |
|---|---|---|
| 点击按钮执行无参函数 | onClick={fn} | onClick={() => fn}（点击无反应） |
| 点击按钮执行带参函数 | onClick={() => fn(arg)} | onClick={fn(arg)}（渲染时立即执行） |
| 在 useEffect 中执行副作用 | useEffect(fn, []) | useEffect(fn(), [])（立即执行，不符合预期） |
| 需要缓存函数引用 | useCallback(fn, deps) | 无，必须传函数引用 |
| 高阶函数生成回调 | render={factory(...)} | render={factory}（可能传递了未执行的工厂函数，导致组件内部调用错误） |
六、总结
一个按钮点不动的 bug，背后是 JavaScript 函数作为一等公民带来的“引用 vs 执行”的区分。理解这一区分，不仅能避免类似错误，还能帮助我们在项目中写出更清晰、更健壮的代码。
核心原则：
- 组件 props 期望的是一个函数引用，而不是函数的执行结果。
- 当需要传递额外参数时，用箭头函数包裹，延迟执行。
- 对于 Hook 参数、useCallback 等，永远传递函数引用。
- 高阶函数可以立即执行，因为它返回的函数才是真正需要的引用。
遇到“代码没报错但不生效”的问题时，先检查函数到底有没有被调用，往往能快速定位问题。这个简单的教训，让我对 JavaScript 的语言特性有了更深的理解，也希望能帮助你在未来的开发中少踩坑。
如果你也有类似的经历，或者对函数引用与执行有其他见解，欢迎留言讨论！
