JSX中调用JavaScript函数为何无需加()？参数传递解析
Hey there! Great question—this is one of those React (and JavaScript) details that trips up a lot of learners at first, so let’s break it down clearly:
1. 为什么是onClick={makeDoggy}而不是makeDoggy()？
当你写makeDoggy()带括号时，意味着组件一渲染就会立刻执行这个函数，而不是等用户点击图片的时候才执行。
React的onClick属性需要的是一个函数引用（也就是函数本身，不是执行函数后得到的结果）。传递不带括号的makeDoggy，其实是在告诉React：“嘿，当这个元素被点击的时候，再帮我运行这个函数。”
要是你不小心写成了makeDoggy()，那页面一加载你的小猫就会变成小狗，点击操作反而会失效——因为你传给onClick的是makeDoggy执行后的返回值（这个函数没有返回值，也就是undefined），而不是可以触发的函数。
2. 那个e参数是怎么被传递的？
你不需要手动传递e参数，因为React会自动帮你完成这件事！
当用户点击你的<img>元素时，React的事件系统会创建一个合成事件对象（SyntheticEvent）——这是React封装的、兼容所有浏览器的事件对象，里面包含了事件的所有细节：被点击的元素（e.target）、事件类型、鼠标坐标等等。
然后React会自动把这个合成事件对象作为第一个参数，传给你绑定的事件处理函数（也就是makeDoggy）。这就是为什么你可以定义makeDoggy(e)，并且直接访问e.target，完全不用手动写类似onClick={() => makeDoggy(someEvent)}这样的代码（当然，如果需要传递额外参数的话，你也可以这么写）。
结合你的代码再梳理一遍流程：
当用户点击小猫图片时：
- React检测到点击事件
- React创建合成事件对象
- React调用
makeDoggy，并把这个事件对象作为e参数传进去 - 你的函数通过
e.target获取到被点击的图片元素，更新它的src和alt属性，把小猫变成小狗！
内容的提问来源于stack exchange，提问作者insertmynamethere
