成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React技術(shù)?！狧otModuleReplacement

william / 3094人閱讀

摘要：如果檢測到文件變化，會重新構(gòu)建被改變的文件。另外，被改變的模塊被發(fā)送到，用來做熱替換。首先檢查，被更新的模塊能否指是否被跟蹤詢問實例是否有更新。如果有更新，實例會異步下載更新代碼，并通知已經(jīng)準備就緒。參考資料官方文檔官方同事的總結(jié)

Hot Module Replacement是webpack下實現(xiàn)熱刷新的模塊，由于webpack的坑爹文檔，看了很久才搞明白這東西怎么用。

Webapck的熱刷新用起來很爽，連續(xù)寫一個下午，一次刷新都不用，體驗棒棒噠。

實現(xiàn)熱刷新的主要是HOT MODULE REPLACEMENT（HMR）模塊

官方文檔很坑爹，反正我是看的懵懵懂懂的。官方wiki講的稍微好些，不過原理多一些

How does it works? 

Webpacks adds a small HMR runtime to the bundle, during the build process, that runs inside your app. When the build completes, Webpack does not exit but stays active, watching the source files for changes. If Webpack detects a source file change, it rebuilds only the changed module(s). Depending on the settings, Webpack will either send a signal to the HMR runtime, or the HMR runtime will poll webpack for changes. Either way, the changed module is sent to the HMR runtime which then tries to apply the hot update. First it checks whether the updated module can self-accept. If not, it checks those modules that have required the updated module. If these too do not accept the update, it bubbles up another level, to the modules that required the modules that required the changed module. This bubbling-up will continue until either the update is accepted, or the app entry point is reached, in which case the hot update fails.

在構(gòu)建時，webapck添加一個小的HMR實例到bundle內(nèi)部，當構(gòu)建完成后，webpack不再存在但保持監(jiān)控源文件。如果webpack檢測到文件變化，會重新構(gòu)建被改變的文件。根據(jù)設(shè)置，webpack要么發(fā)送一個信號給HMR實例，要么檢查webpack的變化。另外，被改變的模塊被發(fā)送到HMR runtime，用來做熱替換。首先檢查，被更新的模塊能否self-accept【指是否被HMR跟蹤】?
From the app view 
The app code asks the HMR runtime to check for updates. The HMR runtime downloads the updates (async) and tells the app code that an update is available. The app code asks the HMR runtime to apply updates. The HMR runtime applies the update (sync). The app code may or may not require user interaction in this process (you decide).

app詢問HMR實例是否有更新。如果有更新，HMR實例會異步下載更新代碼，并通知app已經(jīng)準備就緒。app源碼請求HMR實例開始更新。HMR實例同步更新。app可以選擇是否和用戶交互。
From the compiler(webpack) view

待續(xù)。。。

參考資料：

【1】官方文檔

【2】官方wiki

【3】同事的總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79910.html

相關(guān)文章

  • Webpack HMR 原理解析

    摘要：在過程中會利用簡稱中的兩個方法和。是通過請求最新的模塊代碼，然后將代碼返回給，會根據(jù)返回的新模塊代碼做進一步處理，可能是刷新頁面，也可能是對模塊進行熱更新。該方法返回的就是最新值對應(yīng)的代碼塊。 Hot Module Replacement（簡稱 HMR) 包含以下內(nèi)容： 熱更新圖 熱更新步驟講解 showImg(https://segmentfault.com/img/remote...

    Ververica 評論0 收藏0

  • React技術(shù)棧實現(xiàn)XXX點評App demo

    摘要：項目的架構(gòu)也是最近在各種探討研究。還求大神多指點項目技術(shù)總結(jié)技術(shù)棧項目結(jié)構(gòu)探究初體驗關(guān)于項目中的配置說明項目簡單說明開發(fā)這一套，我個人的理解是體現(xiàn)的是代碼分層職責分離的編程思想邏輯與視圖嚴格區(qū)分。前端依舊使用技術(shù)棧完成。 項目地址：https://github.com/Nealyang/R...技術(shù)棧：react、react-router4.x 、 react-redux 、 webp...

    wslongchen 評論0 收藏0

  • 你想要的全平臺全棧開源項目-Vue、React、小程序、安卓、ReactNative、java后端

    摘要：無論你是前端后端移動端開發(fā)人員，或是設(shè)計師產(chǎn)品經(jīng)理，都可以在平臺上發(fā)布項目，與志同道合的小伙伴一起協(xié)作完成項目。 全平臺全棧開源項目 coderiver 今天終于開始前后端聯(lián)調(diào)了~ 首先感謝大家的支持，coderiver 在 GitHub 上開源兩周，獲得了 54 個 Star，9 個 Fork，5 個 Watch。 這些鼓勵和認可也更加堅定了我繼續(xù)寫下去的決心~ 再次感謝各位大佬！ ...

    Maxiye 評論0 收藏0

  • 使用react技術(shù)棧完全重寫一個vue書城項目

    摘要：本項目是在之前一個項目基礎(chǔ)上，用技術(shù)棧重寫的一個書城項目版本地址本項目地址預(yù)覽地址項目說明本項目是一個構(gòu)建的移動書城項目，數(shù)據(jù)是通過爬蟲爬取，存儲在中，項目通過構(gòu)建，前端部分是技術(shù)棧。 本項目是在之前一個vue項目基礎(chǔ)上，用react技術(shù)棧重寫的一個書城項目 vue版本地址 本項目地址 預(yù)覽地址 項目說明 本項目是一個react + nodejs + mysql構(gòu)建的移動書城項目，...

    aaron 評論0 收藏0

  • [ 一起學React系列 -- 0 ] React技術(shù)棧學習路線

    摘要：的出現(xiàn)真可謂是前端界的福音，正與之宗旨所說，。據(jù)統(tǒng)計，目前世界上有的項目使用了。技術(shù)棧學習路線直到前段時間筆者的朋友給推薦了一個，真是欣喜若狂也更加堅定了自己在繼續(xù)前進的想法。這是一個外國友人總結(jié)的一套技術(shù)棧學習路線，先給傳送門。 我相信點進來的同學都是沖著標題來的，當然本文也不會讓各位失望。不過在正式介紹標題所述的內(nèi)容之前，我們不妨先放下技術(shù)，一起回顧下自己做前端技術(shù)的心路歷程。 前...

    Java3y 評論0 收藏0

發(fā)表評論

0條評論

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