最初に2つの違いについて話させてください
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コードにバインドする方法は同じですが、関数アドレスのみが渡されました。