先说两者的区别在哪里
1.函数名其实就是指向函数体的指针
2.不加括号， 可以认为是查看该函数的完整信息，
3.不加括号传参，相当于传入函数整体
4.加括号 表示立即调用（执行）这个函数里面的代码（花括号部分的代码）
看下面代码就很好理解了
<body>
<!--在html标签中是作为属性添加进去的,所以必须加括号,理解不了没关系,先看下面
对比一下就懂了-->
<button onclick="onclick1()">btn1</button>
<button id="btn">btn2</button>
</body>
<script>
function onclick1() {
alert("这是btn1的弹窗")
}
function onclick2() {
alert("这是btn2的弹窗")
}
//这个代码是正确的,在给btn2进行绑定事件的时候传入一个函数地址,当触发事件执行函数体,而不是进行事件绑定的时候执行函数
document.getElementById("btn").addEventListener("click",onclick2)
//下面代码错误的
//如果换成下面代码,就会在页面渲染的的时候执行弹窗,因为传入的是立即执行函数的结果
//document.getElementById("btn").addEventListener("click",onclick2())
</script>在React项目中的事件绑定
onchange=()=>{
this.props.store.dispatch(increasefunc(2))
}
add_name=()=>{
this.props.store.dispatch(addnamefuc("feifei"))
}
render() {
const {
count} = this.props.store.getState().counterReducer
const {
name} = this.props.store.getState().nameReducer
//console.log(this.props.store.getState().counterReducer)
return(
<div>
<p>{
name}点击了{
count}次</p>
<button onClick={
this.onchange}>click</button>
<button onClick={
this.add_name}>换名字</button>
</div>
)
}这个里面和上面的稍有区别,如果这时的onclick传入函数加括号之后,就会在页面渲染的时候触发函数,失去点击按钮的效果,可以自己尝试一下,我是这样理解的:因为它是jsx的语法格式,所以还是以js方式进行的,所以和上面js代码绑定事件的方法是一样的,只传入函数地址.