国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

結合源碼徹底理解 react事件機制原理 01 - 對事件機制的初步理解和驗證

muddyway / 2483人閱讀

摘要：前言這是事件機制的第一篇，主要內容有表象理解，驗證，意義和思考。因為合成事件的觸發是基于瀏覽器的事件機制來實現的，通過冒泡機制冒泡到最頂層元素，然后再由統一去處理。合成事件的阻止冒泡不會影響原生事件。

前言

這是 react 事件機制的第一篇，主要內容有：表象理解，驗證，意義和思考。

表象理解

先回顧下 對react 事件機制基本理解，react 自身實現了一套自己的事件機制，包括事件注冊、事件的合成、事件冒泡、事件派發等，雖然和原生的是兩碼事，但也是基于瀏覽器的事件機制下完成的。

我們都知道react 的所有事件并沒有綁定到具體的 dom節點上而是綁定在了document 上，然后由統一的事件處理程序來處理，同時也是基于瀏覽器的事件機制（冒泡），所有節點的事件都會在 document 上觸發。

上面是基于對 react 事件的一個基本的認知，那這個認知是否正確呢？我們可以通過簡單的方法進行驗證。

驗證

驗證內容：

所有事件均注冊到了元素的最頂層-document 上

節點的事件由統一的入口處理

為了方便，直接通過 cli 創建一個項目。

代碼如下：

componentDidMount(){ 

        document.getElementById("btn-reactandnative").addEventListener("click", (e) => {
            console.log("原生+react 事件:   原生事件執行");
        });

    }

    handleNativeAndReact = (e) => {
        console.log("原生+react 事件:  當前執行react事件");
    }

    handleClick=(e)=>{
        console.log("button click");
    }
 render(){
        return 
react event!!!
react 事件

                
        

    }

代碼中給兩個 button綁定了合成事件，多帶帶給btn#btn-reactandnative綁定了一個原生的事件。

然后看下chrome 的控制臺，查看元素上的注冊事件。

經過簡單的驗證，可以看到所有的事件根據不同的事件類型都綁定在了 document 上。觸發函數統一是 dispatchEvent。

試想一下

如果一個節點上同時綁定了合成和原生事件，那么禁止冒泡后執行關系是怎樣的呢？

其實讀到這里答案已經有了。我們現在基于目前的知識去分析下這個關系。

因為合成事件的觸發是基于瀏覽器的事件機制來實現的，通過冒泡機制冒泡到最頂層元素，然后再由dispatchEvent統一去處理。

下面是我得出的結論：

原生事件阻止冒泡肯定會阻止合成事件的觸發。

合成事件的阻止冒泡不會影響原生事件。

為什么呢？先回憶下瀏覽器事件機制

瀏覽器事件的執行需要經過三個階段，捕獲階段-目標元素階段-冒泡階段。

節點上的原生事件的執行是在目標階段，然而合成事件的執行是在冒泡階段，所以原生事件會先合成事件執行，然后再往父節點冒泡。

既然原生都阻止冒泡了，那合成還執行個啥嘞。

好，輪到合成的被阻止冒泡了，那原生會執行嗎？

當然會了。

因為原生的事件先于合成的執行，所以合成事件內阻止的只是合成的事件冒泡。（代碼我就不貼了）

所以得出結論：

原生事件（阻止冒泡）會阻止合成事件的執行

合成事件（阻止冒泡）不會阻止原生事件的執行

兩者最好不要混合使用，避免出現一些奇怪的問題

意義

react 自己做這么多的意義是什么？

我的理解的是

1.減少內存消耗，提升性能，不需要注冊那么多的事件了，一種事件類型只在 document 上注冊一次

2.統一規范，解決 ie 事件兼容問題，簡化事件邏輯

3.對開發者友好

思考

既然 react 幫我們做了這么多事兒，那他的背后的機制是什么樣的呢？

事件怎么注冊的，事件怎么觸發的，冒泡機制怎樣實現的呢？

請看后續文章.....

更多精彩內容歡迎關注我的公眾號-前端張大胖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104426.html

相關文章

  • 前端小冊 - 結合源碼徹底理解 react 事件機制

    摘要：對事件機制的初步理解和驗證對于合成的理解事件注冊機制事件執行本文基于進行分析，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解。最后希望通過本文可以讓你對事件機制有更清晰的認識和理解。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 寫這個文章也算是實現19年的一個 flag，研究一個知識點并且把...

    YJNldm 評論0 收藏0

  • 結合源碼徹底理解 react事件機制原理 02 - 對于合成的理解

    摘要：前言這是事件機制系列文章的第二篇對于合成的理解，咱們就來說說合成這個名詞。在給注冊事件的時候也是對兼容性做了處理?？偨Y以上就是我對于合成這個名詞的理解，其實內部還處理了很多，我只是略微簡單的舉了幾個栗子。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是react事件機制系列文章的第二篇-對于合成的理解，...

    nihao 評論0 收藏0

  • 結合源碼徹底理解 react事件機制原理 03 - 事件注冊

    摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解。到這里事件注冊就完事兒了。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是 react 事件機制的第三節 - 事件注冊，通過本文你將了解react 事件的注冊過程，以及在這個過程中主要經過了哪些關鍵步驟，同時結合源...

    chaosx110 評論0 收藏0

  • 結合源碼徹底理解 react事件機制原理 04 - 事件執行

    摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解。總結本文主要是從整體流程上介紹了下事件觸發的過程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是 react 事件機制的第四節-事件執行，一起研究下在這個過程中主要經過了哪些關鍵步驟，本文也是react 事件機制...

    marser 評論0 收藏0

  • 優秀文章收藏（慢慢消化）持續更新~

    摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<