为何onClick中带括号的函数会在页面渲染时执行而非点击按钮时？

这本质是对JSX事件绑定逻辑的误解，核心区别在于你传给onClick的是函数本身，还是函数执行后的返回值：

• 当你写onClick={fetchDBCards()}时，JSX在组件渲染过程中会直接执行这个函数，然后把函数的返回值（如果没写return就是undefined）赋值给onClick属性。这就导致每次组件触发渲染（比如state更新、props变化），这个函数都会被调用一遍，和按钮点击完全没关系。
• 而写onClick={fetchDBCards}时，你是把fetchDBCards这个函数本身作为事件回调传递给onClick。只有当按钮被点击时，React才会调用这个函数，这才是事件绑定的正确逻辑。

如果需要给函数传递参数，别直接加括号，用箭头函数包裹就行，比如：

<button onClick={() => fetchDBCards(123)}>获取ID为123的卡片</button>

这种写法里，箭头函数本身是回调，只有点击时才会执行箭头函数，进而调用带参数的fetchDBCards，不会在渲染时触发。

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