前端React技術框架的事件機制不同於常見的事件機制——原生事件，此文將介紹React的事件機制是什麼，與原生事件的區別，以及這兩種事件機制是否可以混用等。希望您在閱讀這篇文章之後，能夠對React的事件機制原理有所瞭解，藉此在使用React的過程中避免錯誤，或者更加準確地定位錯誤。
React事件機制是什麼？
React的事件是合成事件(Synethic event)，不是原生事件。
demo1: <div onclick="handle()">ni</div>demo2: render() { return <div onClick={this.handle}>ni</div> }
雖然兩個例子都是通過標籤內嵌的方式將click事件進行綁定，但其中的原理是不一樣的，demo1是採用原生的事件處理，demo2是採用React的合成事件機制處理。
React事件機制步驟
React事件機制執行分爲如下兩個步驟。
-
事件綁定：當用戶在爲onClick添加函數時，React並沒有將Click事件綁定在DOM上,而是在document處監聽所有支持的事件；
-
事件觸發：當事件發生，並冒泡至document處時，使用統一的分發函數dispatchEvent將指定函數執行。
合成事件和原生事件的區別
1. 寫法不同。在原生事件中，事件名稱使用小寫，而 React 中使用駝峯命名。
如果採用 JSX 的語法，你需要傳入一個函數作爲事件處理函數，而不是一個字符串(DOM 元素的寫法)。
// 原生事件<button onclick="buttonClick()">// React事件<button onClick="buttonClick()">
2. 阻止默認行爲不同。在 HTML 中，阻止事件的默認行爲使用 return false，而 React 中必須調用 preventDefault。
// 原生<button onclick="console.log('123'); return false">// Reactfunction buttonClick(e) {e.preventDefault()}
3. 機制不同。原生事件是直接將事件綁定到當前元素，React 中的事件機制則分爲兩個階段：事件註冊、事件分發。所有的事件都會註冊到 document 上，當觸發時，會採用事件冒泡的形式冒泡到document上面，然後React將事件封裝給正式的函數處理。
React事件機制總流程圖
React事件和原生事件執行順序的差別
componentDidMount() {this.parent.addEventListener('click', (e) => {console.log('dom parent');})this.child.addEventListener('click', (e) => {console.log('dom child');})document.addEventListener('click', (e) => {console.log('document');})}childClick = (e) => {console.log('react child');}parentClick = (e) => {console.log('react parent');}render() {return (<div onClick={this.parentClick} ref={ref => this.parent = ref}><div onClick={this.childClick} ref={ref => this.child = ref}>test</div></div>)}
執行結果爲：
由此得出如下結論：
-
React的所有事件都掛載在document中；
-
當真實dom觸發後，冒泡到document，纔會對React事件進行處理；
-
所以原生的事件會先執行；
-
然後執行React合成事件；
-
最後執行真正在document上掛載的事件。
React事件和原生事件可以混用嗎？
React事件和原生事件最好不要混用。
原生事件中如果執行了stopPropagation方法，會導致其他React事件失效。因爲所有元素的事件將無法冒泡到document上。
由上面的執行機制不難得出：所有的React事件都將無法被註冊。
總結
上面的介紹讓我們瞭解到了React事件機制，以及React事件機制的意義所在：
-
減少內存消耗，提升性能。不需要註冊那麼多的事件了，一種事件類型只在 document 上註冊一次；
-
統一規範，解決 ie 事件兼容問題，簡化事件邏輯；
-
對開發者友好。
豬齒魚數智化開發管理平臺正是使用了 React 技術框架作爲前端應用框架，並結合豬齒魚UI組件庫來實現前端相關需求。比如：通過豬齒魚組件庫中的dataSet數據源從後端獲取數據，並和頁面的table組件和表單組件綁定起來，再結合React實現數據的渲染和傳遞等，豬齒魚系統設計中的表單、表格、彈窗等一系列交互性功能基本都通過dataSet數據源與豬齒魚UI組件庫聯動綁定實現。
參考
-
React事件機制，超厲害，
https://zhuanlan.zhihu.com/p/49067231
-
【React深入】React事件機制，ConardLi，https://segmentfault.com/a/1190000018391074
-
React事件處理的機制及原理， 冷星，
https://www.jb51.net/article/151921.htm
關於甄知科技
About Zknow
上海甄知科技有限公司（簡稱甄知科技）是一家服務管理數字化領先企業，由業界知名的企業數字化綜合服務商上海漢得信息技術股份有限公司（股票代碼：300170）孵化而成，承襲漢得信息20年的企業信息化服務經驗和對企業數智化建設的深入理解，以產品燕千雲、豬齒魚，爲用戶提供智能化IT運維、人性化員工服務、全方位客戶成功、可視化軟件研發的SaaS管理平臺+PaaS定製能力，強勢助力各行業企業數智化轉型升級。
申請頁面：https://www.zknow.com/zknow/trail/
甄知科技陪伴衆多優秀企業共同成長
