React元件中的事件處理函式

class reactevent extends component 

handleclick() 
render() >click mebutton>;
}}

class reactevent extends component 

render() >click mebutton>;
}}

使用class fields語法（

class reactevent extends component 

render() >click mebutton>;
}}

class reactevent extends component 

render() >click mebutton>;
}}

constructor函式中bind

使用class fields語法

render中使用箭頭函式

在render中使用bind

render時生成新函式否否

是是效能無影響

無影響有影響

有影響可直接攜帶引數否否

是是簡潔性不好好好

好上表中我們看到，在render中直接bind或者箭頭函式都會影響效能，原因在於，在render 中的bind和箭頭函式在每次render時都會建立新的函式，導致子元件的props發生改變，這在purecomponent中會影響效能，除非自己在shouldcomponentupdate中進行優化。

//僅作為示例**

，不遵循常用**
規範//子元件
class button extends react.purecomponent >hahahabutton>)}}
//父元件
class buttonlist extends react.component ;
this.handleclick = this.handleclick.bind(this);
} handleclick() 
onstatechange = () => );
} render() >statechangebutton> 
/>)
}div
>)}}
reactdom.render(
, document.getelementbyid('root')
);

//render中使用箭頭函式

/>
))}

//render中使用bind

/>
))}

//handleclick中通過e.target.dataset.id獲取

onclick=/>
))}

廣州vi設計公司

這裡不強制推薦使用哪一種，對於各個團隊來說，可以根據專案，選擇自己團隊的事件繫結方式。

因為箭頭函式的簡潔性，在公司專案中，我們團隊通常使用class fields 定義箭頭函式來繫結事件。當需要傳參的時，單個引數傳遞使用data屬性傳參。多個引數傳遞時，採用拆分子元件的方式**傳參。

//子元件

class button extends react.purecomponent 
render() >hahahabutton>)}}
//父元件
class buttonlist extends react.component ;
} handleclick = (item) => 
render() = this.state;
return (
item=/>)
}div>)}}
reactdom.render(
, document.getelementbyid('root')
);

React元件中的事件

方法名稱 react中採用了駝峰命名法，從第二個單詞的字母開始大寫 原生js的寫法是全部小寫 vue中是通過v on 加上觸發事件 也是全小寫的，但是沒有on 傳值 react中事件接受的值是乙個方法，需要用 包裹起來 原生js的事件接受的值是乙個字串 vue中的事件接受的值是乙個字串 方法名稱 c...

React 事件處理函式

觸控事件 ontouchcancel ontouchend ontouchmove ontouchstart 只會在移動裝置上接受 鍵盤事件 onkeydown onkeypress onkeyup 剪下事件 oncopy oncut onpaste 表單事件 onchange oninput on...

react中的事件處理

方式1 dom0級別的事件繫結 btn 點我 button dom0級別的事件繫結 let btn document.getelementbyid btn btn.onclick function script body 方式2 dom2級別的事件繫結 btn 點我 button dom0級別的事件...