Javascript 为什么React JSX元素事件处理程序不使用类似于html事件处理程序的括号？

在学习HTML事件处理程序和React的过程中，我了解到在HTML中，事件处理程序值（例如函数）应该后跟括号。据我所知，JSX元素是在React中编写类似html的元素的另一种方式，但在编写这些元素时，我们应该省略括号，我不明白为什么？如果它们表示类似HTML的元素，它们的行为不应该相同吗

<button onClick={shoot}>JSX element!</button>

<button onclick="shoot()">HTML element!</button>

JSX元素！
HTML元素！

假设我们有一个函数

const shoot = () => {  };

这就是我们执行它的方式

shoot(); // this will execute the function

这就是我们将函数绑定到事件的方式，我们不像

document.addEventListener（'click'，shoot（））那样调用它，我们只是将引用传递给函数，因此，当事件发生时，函数将被执行

document.addEventListener('click', shoot); // shoot will execute when click on tghe document


现在，当这个元素连接到dom时，这将触发
shoot（）
，因为它是
shoot（）
，所以我们立即触发它

<button onclick="shoot()">HTML element!</button>

HTML元素！

但是当点击发生时，这会调用，为什么？我们将引用传递给函数，因此当单击发生时，可以触发函数

<button onClick={shoot}>JSX element!</button>

JSX元素！
JSX中
{
和
}
之间的代码是一个JavaScript表达式。传递给React
onClick
处理程序的值必须是函数

所以
onClick={foo}
相当于
addEventListener（“click”，foo）

但是
onClick={foo（）}
相当于
addEventListener（“click”，foo（））。表达式
foo（）
将调用
foo
函数并解析为其返回值。如果
foo
返回另一个函数，这是很好的，如果它不返回，则是无用的


HTML
onclick
属性的值是作为函数体计算的字符串（所有属性值都是字符串）

所以
onclick=“foo（）”
相当于
addEventListener（“click”，new Function（“foo（）”）；

另一方面，一个只提到
foo
的函数不会做任何事情


函数foo（）{
log（“我被叫过！”）；
}
函数onClick（）{
傅；
}
onClick（）；
同样在HTML示例中，没有将
onClick=“foo（）”
包装在另一个函数中作为addEventListener的参数，为什么它不只是
onClick=“foo”
然后就可以传入而不需要包装在另一个函数中？因为它不是这样设计的。