跳到主要內容

React 為什麼要把事件掛載到 document 上 & 事件機制源碼分析

前言


我們都知道 React 組件綁定事件的本質是代理到 document 上，然而面試被問到，為什麼要這麼設計，有什麼好處嗎？


我知道肯定不會是因為虛擬 DOM 的原因，因為 Vue 的事件就能掛載到真實的 DOM 節點。所以繼續往下探究吧


React 模擬 DOM 事件冒泡的原理


設有一段代碼如下


<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>react demo</title>
     <style>
       #parent {
         width: 200px;
         height: 200px;
         background-color: black;
         display: flex;
         align-items: center;
         justify-content: center;;
       }
       #child {
         width: 100px;
         height: 100px;
         background-color: #FFF;
       }
     </style>
   </head>
   <body>
     <div id="app"></div>
     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
     <script type="text/babel">
       ReactDOM.render(
         <div id="parent" onClick={() => { console.log('parent!') }}>
           <div id="child" onClick={() => { console.log('child!') }}></div>
         </div>,
         document.getElementById('app')
       );
     </script>
   </body>
 </html>

我們在 child 和 parent 兩個節點都掛上了 onClick 函數，並且點擊 child 觸發事件，的確先輸出 child！后輸出 parent！。此刻你們或許留意到了下圖，瀏覽器的反饋是事件的確只有一個，就是掛在 document 上的。



這個事件就是 dispatchDiscreteEvent。簡言之，react 自己定了一個 event 對象，存放着 onClick 回調們，在用戶觸發點擊點擊事件時，挨個檢查並執行。


利弊


我們都知道事件委託的好處，可以減少 DOM 上的事件對象節省內存，優化頁面性能。這麼說還是抽象，舉個例子，若有一 10w 項列表，點擊列表某一項要提示這一列表的某個信息，若你使用 Vue，會在每一個 li 節點掛載事件，10w 個事件將會極大程度上拖慢你的瀏覽器性能，你可以運行下面的例子明顯感到 DOM 加載慢。


<div id="app">
   <ul>
     <li v-for="item in list" @click="handleFn">{{ item }}</li>
   <ul>
 </div>
 
 let list = [];
 for (let i = 0; i < 1000000; i++) {
   list.push(i);
 }
 var app = new Vue({
   el: '#app',
   data: {
     list: list,
   },
   methods: {
     handleFn() {
 
     }
   }
 })


解決這個問題的唯一途徑就是事件代理，只需要把事件掛載到 ul 上，並判定 event.target 來自某個 li。


react 掛載到 document 上的行為天生做了事件代理，省了你這一步操作。


但是弊端還是有的，由於 react 的機制，使得它包裝了一層，開發者沒法在冒泡階段拿到原生的事件對象，那麼就提高了學習成本。


並且在開發者"不知情"的情況下埋下了一個坑，若你在 document 上掛載自定義的事件，並且調用了 e.stopImmediatePropagation() 就不會再執行 react 自身綁定在 document 上的事件。見下面的例子


<script type="text/babel">
 class Toggle extends React.Component {
   constructor(props) {
     super(props);
     document.addEventListener('click', function(e) {
       console.log('document!');
       // 只會輸出 document! ，react 自身的 onClick 回調不會再執行
       e.stopImmediatePropagation();
     })
   }
 
   render() {
     return (
       <div id="parent" onClick={() => { console.log('parent!') }}>
         <div id="child" onClick={() => { console.log('child!') }}></div>
       </div>
     );
   }
 }
 ReactDOM.render(
   <Toggle />,
   document.getElementById('app')
 );
 </script>

React 怎麼禁止事件的冒泡


設上文代碼，點擊了 child 后，只希望 child 的事件被觸發，parent 的不被觸發怎麼做？


結論顯而易見是 stopPropagation。


<div id="child" onClick={(e) => { console.log('child!'); e.stopPropagation() }}></div>

然而上文我們提到過，react 提供的事件對象是它自己合成的事件對象，它的冒泡是模擬的，它的事件模型應該如下圖，下文圖片出自 github-youngwind -React 事件代理與 stopImmediatePropagation



那麼這個 e.stopPropagation() 是什麼？


貼上了部分源碼，簡單解釋下，react 的合成事件里刪除了原生事件的 stopPropagation，並自己模擬實現了一個，它標記了一下 this.isPropagationStopped 為 true，挨個遍歷合成事件對象里的回調之中，回去檢查這個屬性，為 true 則不繼續向下執行。


function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {
   {
     // these have a getter/setter for warnings
     delete this.nativeEvent;
     delete this.preventDefault;
     delete this.stopPropagation;
     delete this.isDefaultPrevented;
     delete this.isPropagationStopped;
   }
   
   // ......省略代碼
   
   _assign(SyntheticEvent.prototype, {
     preventDefault: function() {
       // ......省略代碼
     },
     stopPropagation: function () {
       var event = this.nativeEvent;
 
       if (!event) {
         return;
       }
 
       if (event.stopPropagation) {
         event.stopPropagation();
       } else if (typeof event.cancelBubble !== 'unknown') {
         // The ChangeEventPlugin registers a "propertychange" event for
         // IE. This event does not support bubbling or cancelling, and
         // any references to cancelBubble throw "Member not found".  A
         // typeof check of "unknown" circumvents this issue (and is also
         // IE specific).
         event.cancelBubble = true;
       }
 
       this.isPropagationStopped = functionThatReturnsTrue;
     },
   })
   
   // ......省略代碼
   
 }

但其實吧，我們還有另外一種方式可以組織這種冒泡，就是拿到原生事件對象調用 stopImmediatePropagation，如 e.nativeEvent.stopImmediatePropagation。stopImmediatePropagation 能夠阻止掛載到某個 DOM 節點上多個事件的後續執行。下文圖片出自 github-youngwind -React 事件代理與 stopImmediatePropagation



那麼來探究一下這個合成事件到底是個怎麼回事兒？


首先 document 上掛載的是 dispatchDiscreteEvent 回調函數


function dispatchDiscreteEvent(topLevelType, eventSystemFlags, container, nativeEvent) {
   flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
   discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, container, nativeEvent);
 }

上面函數代理了一堆操作，但總之接下來嘗試分發事件。


function attemptToDispatchEvent(topLevelType, eventSystemFlags, container, nativeEvent) {
   // TODO: Warn if _enabled is false.
   var nativeEventTarget = getEventTarget(nativeEvent);
   // 這個東西就是 react 的虛擬節點 FiberNode {tag: 5, key: null, elementType: "div", type: "div", stateNode: div#child, …}
   var targetInst = getClosestInstanceFromNode(nativeEventTarget);
 
   // ...... 省略判斷觸發節點是否有效性
 
   {
     dispatchEventForLegacyPluginEventSystem(topLevelType, eventSystemFlags, nativeEvent, targetInst);
   } // We're not blocked on anything.
 
 
   return null;
 }

跳過兩步，執行到一個叫 executeDispatchesInOrder 的函數，就要開始按順序的觸發事件。注意函數參數 event 對象，此對象中存放了所有我們 onClick 預設的回調函數。


function executeDispatchesInOrder(event) {
   // event._dispatchListeners 其實就是 onClick 的回調函數。
   // (2) [ƒ, ƒ]
   // 0: ƒ onClick(e)
   // 1: ƒ onClick()
   var dispatchListeners = event._dispatchListeners;
   // event._dispatchInstances 其實就是 child 和 parent 的兩個虛擬節點
   // (2) [FiberNode, FiberNode]
   var dispatchInstances = event._dispatchInstances;
 
   
 
   if (Array.isArray(dispatchListeners)) {
     // 循環執行回調，除非有 e.stopPropagation() 被觸發，讓 isPropagationStopped 的標記為 true。
     for (var i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
       } // Listeners and Instances are two parallel arrays that are always in sync.
 
 
       executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
     }
   } else if (dispatchListeners) {
     executeDispatch(event, dispatchListeners, dispatchInstances);
   }
 
   event._dispatchListeners = null;
   event._dispatchInstances = null;
 }


那麼真正執行事件並觸發回掉的過程是這樣的，創造了一個叫 react 的假節點，創造了一個事件 evt 並掛到這個節點上，手動觸發它，最後再銷毀。evt 的回掉內容就是我們的 onClick 里的內容


{
   // ......省略代碼
   var fakeNode = document.createElement('react');
   // ......省略代碼
   var evt = document.createEvent('Event');
   // ......省略代碼
   function callCallback() {
     fakeNode.removeEventListener(evtType, callCallback, false);
     // ......省略代碼
     // 注意這個 func 就是我們的回掉 ƒ onClick() { console.log('child!') }
     func.apply(context, funcArgs);
   }
   // ......省略代碼
 
   var evtType = "react-" + (name ? name : 'invokeguardedcallback'); // Attach our event handlers
 
   fakeNode.addEventListener(evtType, callCallback, false); // Synchronously dispatch our fake event. If the user-provided function
   // errors, it will trigger our global error handler.
 
   evt.initEvent(evtType, false, false);
   fakeNode.dispatchEvent(evt);
   // ......省略代碼
 }


接着循環去執行下一個事件。


參考


github-youngwind -React 事件代理與 stopImmediatePropagation


React官網-事件處理


知乎-超厲害-React事件機制

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】



※產品缺大量曝光嗎?你需要的是一流包裝設計!



※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面



※回頭車貨運收費標準



※推薦評價好的iphone維修中心



※超省錢租車方案



※台中搬家遵守搬運三大原則,讓您的家具不再被破壞!



※推薦台中搬家公司優質服務,可到府估價


Orignal From: React 為什麼要把事件掛載到 document 上 & 事件機制源碼分析

留言

張貼留言

這個網誌中的熱門文章

Python 併發總結，多線程，多進程，異步IO

1 測量函數運行時間 import time def profile(func): def wrapper(*args, ** kwargs): import time start = time.time() func( *args, ** kwargs) end = time.time() print ' COST: {} ' .format(end - start) return wrapper @profile def fib(n): if n<= 2 : return 1 return fib(n-1) + fib(n-2 ) fib( 35 )   2 啟動多個線程，並等待完成   2.1 使用threading.enumerate() import threading for i in range(2 ): t = threading.Thread(target=fib, args=(35 ,)) t.start() main_thread = threading.currentThread() for t in threading.enumerate(): if t is main_thread: continue t.join()   2.2 先保存啟動的線程 threads = [] for i in range(5 ): t = Thread(target=foo, args= (i,)) threads.append(t) t.start() for t in threads: t.join()   3 使用信號量，限制同時能有幾個線程訪問臨界區 from threading import Semaphore import time sema = Semaphor...
張貼留言
閱讀完整內容

高雄十大包子名店出爐

, 圖文：吳恩文 高雄包子大賽落幕了，我只能就我個人意見， 介紹一下前十名這些包子，但是不能代表其他四位評審的意見，雖然身為評審長，我通常不會第一個表示意見，以免影響其他評審， 我主要工作是負責發問。   這次參賽的素包子很少，而且都不夠細致，又偏油，我不愛， 但是第一名的甜芝麻包－熔岩黑金包，竟然是素食得名－ 漢來蔬食巨蛋店。   這包子賣相太好，竹炭粉的黑色外皮刷上金粉，一上桌，眾人驚呼， 搶拍照，內餡是芝麻餡，混一點花生醬增稠，加入白糖芝麻油， 熔岩爆漿的程度剛剛好，我一直以為芝麻要配豬油才行、 但是選到好的黑芝麻油一樣不減香醇， 當下有二位評審就想宅配回家。   尤其特別的是，黑芝麻餡室溫易化，師傅必須要輪班躲在冷藏室內， 穿著大外套才能包，一天包不了多少，我笑說，漢來美食，集團餐廳那麼多，實力雄厚，根本是「 奧運選手報名參加村裡運動會」嘛，其他都是小包子店啊， 但是沒辦法，顯然大家都覺得它好看又好吃， 目前限定漢來蔬食高雄巨蛋店，二顆88元，可以冷凍宅配， 但是要排一陣子，因為供不應求，聽說，四月份， 台北sogo店開始會賣。   第二名的包子，左營寬來順早餐店，顯然平易近人的多，一顆肉包， 十塊錢，是所有參賽者中最便宜的，當然，個頭也小， 它的包子皮明顯和其他不同，灰灰的老麵，薄但紮實有嚼勁， 肉餡新鮮帶汁，因為打了些水，味道極其簡單，就是蔥薑，塩， 香油，薑味尤其明顯，是老眷村的味道， 而特別的是老闆娘是台灣本省人， 當年完全是依據眷村老兵的口味一步一步調整而來，沒有加什麼糖、 五香粉，胡椒粉，油蔥酥。就是蔥薑豬肉和老麵香，能得名， 應該是它的平實無華，鮮美簡單，打動人心。   這是標準的心靈美食，可以撫慰人心，得名之前，寛來順已經天天排隊，現在，恐怕要排更久了， 建議大家六七點早點上門。   第三名，「專十一」很神奇，我記得比賽最後， 大家連吃了幾家不能引起共鳴的包子，有些累，到了專十一， 就坐著等包子，其他評審一吃，就催我趕快試，我一吃， 也醒了大半。   它的包子皮厚薄適中，但是高筋麵粉高些，老麵加一點點酵母， 我心中，它的皮屬一屬二，至於餡又多又好吃，蛋黃還是切丁拌入， 不是整顆放，吃起來「美味、均衡、飽滿」。一顆二十元。   老闆是陸軍專科十一期畢業取名專十一，...
張貼留言
閱讀完整內容

韋伯連續劇終於更新 期待第一季順利完結

　　地球天文學界的跳票大王詹姆斯·韋伯空間望遠鏡 (James Webb Space Telescope，縮寫為 JWST)自 1996 年以來斷斷續續不按劇本演出的連續劇終於讓焦慮的觀眾們又等到了一次更新：五層遮陽罩測試順利完成。 裝配完成的韋伯望遠鏡與好夥伴遮陽罩同框啦。Credit: NASA 　　嚴格的測試是任何空間任務順利成功的重中之重。遮陽罩，這個韋伯望遠鏡異常重要的親密夥伴，要是無法正常運轉的話，韋伯的這一季天文界連續劇說不準就要一直拖更了。 　　詹姆斯·韋伯空間望遠鏡是歷史上造出的最先進的空間望遠鏡。它不僅是一架紅外望遠鏡，還具有特別高的靈敏度。但想要達到辣么高的靈敏度來研究系外行星和遙遠的宇宙童年，韋伯童鞋必須非常"冷靜"，體溫升高的話，靈敏度會大大折損。這個時候，遮陽罩就要大顯身手啦。 　　遮陽罩在韋伯的設計中至關重要。韋伯望遠鏡會被發射到拉格朗日 L2 點，運行軌道很高，遠離太陽、地球與月球。太陽是韋伯的主要熱量干擾的來源，其次是地球與月球。遮陽罩會有效阻斷來自這三大熱源的能量並保護韋伯維持在工作溫度正常運轉。這個工作溫度指的是零下 220 攝氏度(-370 華氏度；50 開爾文)。 上圖中我們可以看出，韋伯望遠鏡的配置大致可分為兩部分：紅色較熱的一面溫度為 85 攝氏度，藍色較冷的一面溫度達到零下 233 攝氏度。紅色的這部分中，儀器包括太陽能板、通信設備、計算機、以及轉向裝置。藍色部分的主要裝置包括鏡面、探測器、濾光片等。Credit: STSci. 　　遮陽罩的那一部分和望遠鏡的鏡面這部分可以產生非常極端的溫差。遮陽的這面溫度可以達到 110 攝氏度，足以煮熟雞蛋，而背陰處的部分溫度極低，足以凍結氧氣。 　　工程師們剛剛完成了五層遮陽罩的測試，按照韋伯在 L2 時的運行狀態安裝了遮陽罩。L2 距離地球約 160 萬公里。NASA 表示這些測試使用了航天器的自帶系統來展開遮陽罩，測試目前都已成功完成。韋伯望遠鏡遮陽罩負責人 James Cooper 介紹說這是遮陽罩"第一次在望遠鏡系統的电子設備的控制下展開。儘管這個任務非常艱巨，難度高，但測試順利完成，遮陽罩展開時的狀態非常驚艷"。 　　遮陽罩由五層 Kapton 製成。Kapton 是一種聚酰亞胺薄膜材料， 耐高溫絕...
張貼留言
閱讀完整內容