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

資訊專欄INFORMATION COLUMN

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

nihao / 3522人閱讀

摘要：前言這是事件機制系列文章的第二篇對于合成的理解，咱們就來說說合成這個名詞。在給注冊事件的時候也是對兼容性做了處理。總結以上就是我對于合成這個名詞的理解，其實內部還處理了很多，我只是略微簡單的舉了幾個栗子。

前言

這是react事件機制系列文章的第二篇-對于合成的理解，咱們就來說說合成這個名詞。

剛聽說合成這個詞時候，感覺是特別高大上，很有深度，不是很好理解。

當我大概的了解過react事件機制后，略微了解一些皮毛，我覺得合成不單單是事件的合成和處理，從廣義上來說還包括：

1.首先就是對原生事件的封裝

2.對某些原生事件的升級和改造

3.不同瀏覽器事件兼容的處理

1. 對原生事件的封裝

先看一段再熟悉不過的代碼

上面代碼是給一個元素添加click事件的回調方法

方法中的參數e，其實不是原生事件對象而是react包裝過的對象，同時原生事件對象被放在了屬性 e.nativeEvent 內。

通過調試，在執行棧里看下這個參數e包含哪些屬性

![clipboard.p

vhR)

![圖片上傳中...]

看下官方文檔，幫助我們理解下合成事件

SyntheticEvent是react合成事件的基類，定義了合成事件的基礎公共屬性和方法。

react會根據當前的事件類型來使用不同的合成事件對象，比如鼠標單機事件 - SyntheticMouseEvent，焦點事件-SyntheticFocusEvent等，但是都是繼承自SyntheticEvent。

2.對原生事件的升級和改造

對于有些dom元素事件，我們進行事件綁定之后，react并不是只處理你聲明的事件類型，還會額外的增加一些其他的事件，幫助我們提升交互的體驗。

這里就舉一個例子來說明下：

當我們給input聲明個onChange事件，看下 react幫我們做了什么？

可以看到react不只是注冊了一個onchange事件，還注冊了很多其他事件。

而這個時候我們向文本框輸入內容的時候，是可以實時的得到內容的。

然而原生只注冊一個onchange的話，需要在失去焦點的時候才能觸發這個事件。

所以這個原生事件的缺陷react也幫我們彌補了。

ps：上面紅色箭頭中有一個 invalid事件，這個并沒有注冊到document上，而是在具體的元素上。我的理解是這個是html5新增的一個事件，當輸入的數據不符合驗證規則的時候自動觸發，然而驗證規則和配置都要寫在當前input元素上，如果注冊到document上這個事件就無效了。

3.瀏覽器事件的兼容處理

這個也算是一個點吧。react在給document注冊事件的時候也是對兼容性做了處理。

看下代碼

上面這個代碼其實就是給document注冊事件，內部其實也是做了對ie瀏覽器的兼容。

總結：

以上就是我對于react合成這個名詞的理解，其實react內部還處理了很多，我只是略微簡單的舉了幾個栗子。

本文算是一個過度吧，后面開始聊事件注冊和事件派發的機制。走起~

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

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

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

相關文章

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

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

    YJNldm 評論0 收藏0

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

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

    marser 評論0 收藏0

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

    摘要：前言這是事件機制的第一篇，主要內容有表象理解，驗證，意義和思考。因為合成事件的觸發是基于瀏覽器的事件機制來實現的，通過冒泡機制冒泡到最頂層元素，然后再由統一去處理。合成事件的阻止冒泡不會影響原生事件。 showImg(https://segmentfault.com/img/bVbtvP2?w=800&h=420); 前言 這是 react 事件機制的第一篇，主要內容有：表象理解，驗證...

    muddyway 評論0 收藏0

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

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

    chaosx110 評論0 收藏0

  • React16事件機制徹底解讀

    摘要：二阻止事件冒泡，沒辦法阻止原生事件冒泡。從事件的三個階段講起，會略微提及下的事件機制。就是說注冊某個事件，會強制依賴其他事件。因為所有事件都是綁定在上的。劃重點事件合成的過程。派發的過程實際上就是遍歷事件隊列的過程。 react.js事件機制 寫這篇文章的緣由： 一：在給input綁定事件的時候，很好奇為何onChange的交互形式竟然和onInput一模一樣。 因為原生的change...

    sugarmo 評論0 收藏0

發表評論

0條評論

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