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

資訊專欄INFORMATION COLUMN

react-router 2.7.0源碼深度分析

tianyu / 2372人閱讀

摘要：介紹為提供路由管理為基于格式的系統(tǒng)提供了方便的切換頁面功能。它在前端提供給了種方式通過或者瀏覽器原生的進(jìn)行地址更新上一篇介紹了的方式本文則以的形式切入分析。代碼剖析路由配置本生為組建內(nèi)部組建如等。

前言

在前端單頁面應(yīng)用里面,路由是比較重要的部分,筆者的上一篇博文簡單的路由介紹了簡單的路由內(nèi)部機(jī)制,本文則將分析react-router的內(nèi)部機(jī)制。

介紹

react-router為react提供路由管理,為基于jsx格式的app系統(tǒng)提供了方便的切換頁面功能。
它在前端提供給了2種方式,通過hashchange或者瀏覽器原生的history api進(jìn)行地址更新,上一篇介紹了hash的方式,本文則以history api的形式切入分析。

代碼剖析 路由配置

react-router本生為react組建,內(nèi)部組建如Router,Route,IndexRoute, Redirect,Link等。
以下是摘自react-router example的路由配置

點(diǎn)此獲取完整代碼

對應(yīng)結(jié)構(gòu)圖

在初始化過程中他會以children形式讀入Router生命周期內(nèi),在被轉(zhuǎn)化為數(shù)組,此時(shí)它內(nèi)部的結(jié)構(gòu)如下

路由初始化 初始化browserHistory對象

react-router依賴history^2.0模塊生成的history對象,然后在Router生命周期componentWillMount中加入對應(yīng)的封裝如basename,query
useQueries.js 對history對象內(nèi)的方法進(jìn)行封裝

function listen(listener) {
  return history.listen(function (location) {
    listener(addQuery(location))
  })
}

// Override all write methods with query-aware versions.
function push(location) {
  history.push(appendQuery(location, location.query))
}

useBasename.js 對history對象內(nèi)的方法進(jìn)行封裝

   function listen(listener) {
      return history.listen(function (location) {
        listener(addBasename(location))
      })
    }

    // Override all write methods with basename-aware versions.
    function push(location) {
      history.push(prependBasename(location))
    }

Router.js 對history對象增加setRouteLeaveHook鉤子函數(shù)以及isActive函數(shù)

最終生成router對象 以this.router = router存在Router組建內(nèi)部,this.history 已過時(shí)(issues),不建議使用

初始化監(jiān)聽事件 
this._unlisten = transitionManager.listen(function (error, state) {
  if (error) {
    _this.handleError(error);
  } else {
    _this.setState(state, _this.props.onUpdate);
  }
});


function listen(listener) {
changeListeners.push(listener);
if (location) {
  listener(location);
} else {
  var _location = getCurrentLocation();
  allKeys = [_location.key];
  updateLocation(_location);
}

此時(shí)整體初始化完畢

改變路由 
  /

以一次Link點(diǎn)擊為例

觸發(fā)Link組建的handleClick方法

調(diào)用router對象 push方法

拼裝location對象

改變url欄的地址

調(diào)用updateLocation 觸發(fā)changeListeners內(nèi)的所有監(jiān)聽事件

回調(diào)函數(shù)內(nèi)調(diào)用match方法,根據(jù)location對象正則匹配router對象,匹配出對應(yīng)的組建 執(zhí)行runLeaveHooks鉤子

調(diào)用Router組建的setState(nextstate)

Router-context組建的render方法調(diào)用createElement

調(diào)用react.createElement

完成渲染

簡潔的流轉(zhuǎn)圖

放上一個(gè)本人總結(jié)的一個(gè)簡單流轉(zhuǎn)過程圖

詳細(xì)流程圖

對簡潔的流程圖熟悉之后,則可深入了解內(nèi)部機(jī)制的細(xì)節(jié)如下圖

歸納

雖然源碼繁瑣復(fù)雜,但是內(nèi)部的核心仍是圍繞著下面3塊動作做一系列的封裝.

注冊監(jiān)聽事件:封裝history對象的,生成router對象存儲在Router內(nèi),并通過其注冊監(jiān)聽事件,綁定相應(yīng)的回調(diào)函數(shù)

觸發(fā)監(jiān)聽事件:通過Link/browserHistory.push/瀏覽器回退快進(jìn)/dom ready 等四種方式觸發(fā)回調(diào)函數(shù)

回調(diào)函數(shù): Router內(nèi)的setState(next)最終觸發(fā)react.createElement進(jìn)而更新UI

最后

本文有什么不完善的地方,或者流程圖有待改進(jìn)的地方,敬請斧正。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80293.html

相關(guān)文章

  • 前端路由實(shí)現(xiàn)與 react-router 源碼分析

    摘要：回調(diào)函數(shù)將在更新時(shí)觸發(fā)，回調(diào)中的起到了新的的作用。注冊回調(diào)在中使用注冊的回調(diào)函數(shù)，最終放在模塊的回調(diào)函數(shù)數(shù)組中。 原文地址：https://github.com/joeyguo/blog/issues/2 在單頁應(yīng)用上，前端路由并不陌生。很多前端框架也會有獨(dú)立開發(fā)或推薦配套使用的路由系統(tǒng)。那么，當(dāng)我們在談前端路由的時(shí)候，還可以談些什么？本文將簡要分析并實(shí)現(xiàn)一個(gè)的前端路由，并對 reac...

    ISherry 評論0 收藏0

  • react-router v5.x 源碼分析和理解 SPA router 的原理

    摘要：一般情況下，都是作為等其他子路由的上層路由，使用了，接收一個(gè)屬性，傳遞給消費(fèi)子組件。創(chuàng)建對象，兼容老瀏覽器，其他和沒有大區(qū)別總結(jié)分為四個(gè)包，分別為，其中是瀏覽器相關(guān)，是相關(guān)，是核心也是共同部分，是一些配置相關(guān)。 這篇文章主要講的是分析 react-router 源碼，版本是 v5.x，以及 SPA 路由實(shí)現(xiàn)的原理。 文章首發(fā)地址 單頁面應(yīng)用都用到了路由 router，目前來看實(shí)現(xiàn)路由有...

    Harriet666 評論0 收藏0

  • 從路由原理出發(fā)，深入閱讀理解react-router 4.0的源碼

    摘要：通過前端路由可以實(shí)現(xiàn)單頁應(yīng)用本文首先從前端路由的原理出發(fā)，詳細(xì)介紹了前端路由原理的變遷。接著從的源碼出發(fā)，深入理解是如何實(shí)現(xiàn)前端路由的。執(zhí)行上述的賦值后，頁面的發(fā)生改變。 ??react-router等前端路由的原理大致相同，可以實(shí)現(xiàn)無刷新的條件下切換顯示不同的頁面。路由的本質(zhì)就是頁面的URL發(fā)生改變時(shí)，頁面的顯示結(jié)果可以根據(jù)URL的變化而變化，但是頁面不會刷新。通過前端路由可以實(shí)現(xiàn)...

    Miyang 評論0 收藏0

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽，完成整個(gè)狀態(tài)樹的更新。總而言之，遵守這套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

    imingyu 評論0 收藏0

發(fā)表評論

0條評論

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