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

資訊專欄INFORMATION COLUMN

react路由淺析

jackzou / 2305人閱讀

摘要：瀏覽器端使用的和集成使用時會用到中路由分類基于提供的和事件來保持和的同步。路由剖析在上面的示例中是轉發的樞紐在這個中轉站有很多線路通過開關可以啟動列車的運行乘坐列車就可以發現新大陸。

引言

在使用react做復雜的spa開發中,開發中必不可少的就是react-router,它使用Lerna管理多個倉庫, 在browser端常使用的幾個如下所示

react-router 提供了路由的通用核心功能,容易搞混的就是他和react-router-dom的區別,區別就是react-router-dom中多了Link BrowserRouter 這樣的 DOM 類組件,至于router和route都是一樣的。

react-router-dom 瀏覽器端使用的router

react-router-redux 和redux集成使用時會用到

react-router中路由分類 BrowserRouter 
基于html5提供的,history API(pushState, replaceState 和 popstate 事件) 來保持 UI 和 URL 的同步。大致流程就是使用history.pushState塞歷史記錄到瀏覽器中,監聽window.onpopstate事件,url變化的時候render對應組件
HashRouter 
HashRouter 是一種特定的 ， HashRouter 使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL 的同步。大致流程是直接給window.location.hash賦值,監聽hashchange事件,hash變化時,render對應的組件
MemoryRouter 
保存"url"歷史記錄在內存中,在demo測試或者 React Native等非browser環境下使用
StaticRouter 
    服務端渲染中會用到
路由使用

就拿 HashRouter 使用來作為示例, 其它使用形式上類似,多說一句話Hash除了今天說的路由用途之外,還可以做錨點定位。

import React, { Component } from "react";
import {BrowserRouter as Router, Route, Link,Switch,Redirect} from "react-router-dom"

class App extends Component {
  render() {
    return (
        
              

                      

                          
  • home 
    •    //link 本質實現其實就是一個a鏈接
                          
  • about 
    • 
                          
  • list 
    • 
                      
    
                      
    
                  // 匹配到第一個匹配的路由就停止
                           //exact  表示路徑要精確完全匹配
                          //寫法1
                          
    list
    } /> //寫法2
                        // 當都不匹配的時候,執行這個
                      
              
    
            
    );
  }
}

const Home = () => {
  return   
    home page
    
}
const About = () => (
    
    
        
    About
    
    
    
);
export default App;

-------------------------
//關于Router導入還有一種等價的使用方式,如下所示
import createHistory from "history/createHashHistory"
  
        里面的內容同上

    說明 在react-router-dom內部包含很多組件,例如route,link,switch等等,更多組件請參考 這里。上面只是一個簡單的實例,實現簡單的路由跳轉,關于說明都放在注釋里了。

    路由剖析

    在上面的示例中,Router是轉發的樞紐,在這個中轉站有很多線路(Route),通過開關(Link)可以啟動列車的運行,乘坐列車就可以發現新大陸(compontent) 。深入進去可以發現Router只是提供了一個上下文環境, 具體的路由功能的實現依靠傳入的history屬性, 這個屬性的功能由history模塊提供,history模塊里面封裝了createBrowserHistory,createHashHistory,createMemoryHistory等等。因為所有模塊提供的功能接口一樣 所以我們以其中的createHashHistory模塊作為示例分析下, 首先其提供的接口如下

     const history = {
    length: globalHistory.length,  //歷史記錄數量 window.history.length
    action: "POP",   //操作表示 可以為REPLACE  PUSH
    location: initialLocation, //內部封裝的簡版window.location
    createHref, //創建一個hash路由
    push,  
    replace,
    go, // window.history.go(n);
    goBack,  // go(-1);
    goForward, //go(1);
    block, // 地址變化,離開當前頁時設置提示信息
    listen
  };

  return history;

    下面選出幾個比較重要的詳細說明下

    push 
    // const pushHashPath = path => (window.location.hash = path);

    說明 摘出的主要邏輯添加瀏覽器hash地址

    replace 更換瀏覽器hash地址 
    const hashIndex = window.location.href.indexOf("#");

  window.location.replace(
    window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" + path
  );

    說明 摘出的主要邏輯更換瀏覽器hash地址

    listen 
     const listen = listener => {
    const unlisten = transitionManager.appendListener(listener); 
    checkDOMListeners(1);  

    return () => {
      checkDOMListeners(-1);
      unlisten();
    };
  };

    說明 在transitionManager實例中維護了一個listener數組,appendListener添加一個Listener, checkDOMListeners是綁定事件

     window.addEventListener(HashChangeEvent, handleHashChange);

    每當location地址改變,HashChangeEvent觸發的時候, 會取出listeners然后執行,如下所示

     transitionManager.notifyListeners(history.location, history.action);
    block 
      const unblock = transitionManager.setPrompt(prompt);//注冊提示信息
  unblock() //執行后解除地址變化時提示信息
    總結

    斷斷續續的終于把這篇文章寫好了,在此期間看了history源碼,寫了一些示例,盡可能將自己理解的東西以簡潔直白的方式輸出出來,希望大家看后能產生共鳴。

    參考源碼
    history 4.7.2
    react-router 4.3.0-rc.2

    參考鏈接
    http://reacttraining.cn/web/a...
    https://juejin.im/post/5995a2...

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

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

    相關文章

    • 淺析React之事件系統（二）

      摘要：因為阻止事件冒泡的行為只能用于合成事件中，沒法阻止原生事件的冒泡。同時的創建和冒泡是在原生事件冒泡到最頂層的之后的。淺析之事件系統一 上篇文章中，我們談到了React事件系統的實現方式，和在React中使用原生事件的方法，那么這篇文章我們來繼續分析下，看看React中合成事件和原生事件混用的各種情況。 上一個例子 在上篇文章中，我們舉了個例子。為了防止大家不記得，我們來看看那個例子的代...

      villainhr 評論0 收藏0

    • 淺析一波路由的hash 和 history 的區別與實現原理以及服務器刷新404的問題及解決方法

      摘要：滿足單頁面的需求。的原理略微復雜一點，它可以通過去變動內容，不會造成頁面刷新。既然瀏覽器不會刷新。這樣的話，就可以做到刷新頁面不崩的效果。如果有服務器部署基礎的可以拿此類的服務器試試，我自己這邊是默默地拿著配置成功了 先解釋下基本概念hashhash 不是那個哈希算法，就是以前url用的錨點，以前是多用來定位頁面展示內容。代表符號是#之所以用hash是因為他既可以獲取到，又可以不去刷新...

      APICloud 評論0 收藏0

    • 淺析React之事件系統（一）

      摘要：合成事件的使用方式在中不會把所有的事件處理器綁定到相應的真實的節點上，而是使用一個統一的事件監聽器，把所有的事件綁定在最外層。在之前開發者需要為了優化性能需要自己來優化自己的事件處理器的代碼，現在幫助你完成了這些工作。 大家周末好，2016年的最后幾篇文章開始寫到了React的一些東西，那么最近就來一些圖表君對于React的簡單總結和理解，那么今天就開始第一篇，說一說React的事件系...

      chemzqm 評論0 收藏0

    • 淺析 React 生命周期

      摘要：在使用組件的進行組件實例化時，得到的便是其返回值。也就是說，如果其子組件的或發生改變時，只會取決于那個組件的方法的返回值。文章為本人原創，原文見本人個博淺析生命周期一淺析生命周期二 Overview 最近常有學習React相關的技術，寫了幾個React的小Demo，使用 React/Express 技術棧。實在太小，羞于拿出來細說。React 的確是一個值得追隨的技術。但React體系...

      lansheng228 評論0 收藏0

    • koa-router 源碼淺析

      摘要：代碼結構執行流程上面兩張圖主要將的整體代碼結構和大概的執行流程畫了出來，畫的不夠具體。那下面主要講中的幾處的關鍵代碼解讀一下。全局的路由參數處理的中間件組成的對象。 代碼結構 showImg(https://segmentfault.com/img/remote/1460000007468236?w=1425&h=1772); 執行流程 showImg(https://segmentf...

      SillyMonkey 評論0 收藏0

    發表評論

    0條評論

    jackzou

    男|高級講師

    TA的文章

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