React新手疑问：onClick={() => onClick()}的作用及为何不能直接用onClick={onClick}

API 探路者

2026-5-7

搞懂React Button组件里的onClick={() => onClick()}

嘿，我来帮你把这个点掰扯清楚，其实没你想的那么复杂！

先说说`onClick={() => onClick()}`到底在干啥

你这个理解其实没毛病——它就是当按钮被点击的时候，去调用父组件传给你的那个onClick函数。这里拆解一下：

外层的onClick是React给原生button元素绑定的点击事件属性，它需要接收一个函数作为值，这个函数会在点击时被触发。
() => onClick()是一个匿名箭头函数，它本身就是传给外层onClick的那个“待触发”的函数。当按钮被点击时，这个箭头函数会执行，然后它再去调用你从组件props里拿到的onClick（也就是父组件传进来的点击逻辑）。

你说“我未创建该函数”，没错！这个onClick函数不是你在Button组件里写的，而是使用你这个Button组件的父组件传过来的。比如父组件里可能会这么用：

<Button onClick={() => alert('按钮被点啦！')}>点击我</Button>

这时候你Button组件里调用的onClick()，就是这个alert函数啦。

其实在你这个场景下（不需要给点击事件传额外参数），直接写onClick={onClick}是完全没问题的！那为什么有人会用箭头函数包裹呢？主要有两个常见原因：

如果你不小心写成了onClick={onClick()}（注意后面加了括号），那这个函数会在组件渲染的时候就立刻执行，而不是点击的时候。用箭头函数包裹的话，() => onClick()只有在点击时才会触发内部的函数调用，就不会出现这种提前执行的问题。

比如你想给点击事件传个按钮的ID或者其他值，这时候就得用箭头函数：

<button onClick={() => onClick(buttonId)}>...</button>

如果直接写onClick={onClick(buttonId)}，同样会在渲染时立刻执行函数，而不是点击时。箭头函数在这里起到了“包装”的作用，让它变成一个只有点击时才会执行的函数，同时还能带上你要传的参数。

你的代码里没有传额外参数，所以直接写onClick={onClick}是更简洁高效的写法（因为箭头函数每次组件渲染都会创建一个新的函数实例，虽然大多数场景下性能影响可以忽略，但能省则省嘛）。不过要注意，如果父组件可能不传onClick props，最好加个判断避免报错：

onClick={onClick ? onClick : undefined}
// 或者更简洁的写法：
onClick={onClick}

因为React会忽略undefined的事件处理函数，不会报错。

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