亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Router入門0x203: react、react-route、react-route-dom

luxixing / 3409人閱讀

摘要：概述上一章使用的是自己實(shí)現(xiàn)的，當(dāng)然已經(jīng)有現(xiàn)成的庫給我們用了，那就是?？偨Y(jié)看透它，然后掌握它資源源碼

0x000 概述

上一章使用的是自己實(shí)現(xiàn)的route，當(dāng)然已經(jīng)有現(xiàn)成的庫給我們用了，那就是react-route。

0x001 history Api說明

在說這個庫之前，得先對history新的api做一個了解

window.history.pushState(data,title,?url)

data：數(shù)據(jù)

title：標(biāo)題

url：地址

當(dāng)我們調(diào)用該函數(shù)的時候，將改變地址欄的地址，但是卻不會導(dǎo)致頁面重新去后臺獲取，如下圖操作，在第一次初始化完成之后，我們依次調(diào)用

window.history.pushState({name:"a"},"","a")
window.history.pushState({name:"b"},"","b")
window.history.pushState({name:"c"},"","c")
window.history.pushState({name:"d"},"","d")

將會看到地址欄分別變成了：

https://github.com/a
https://github.com/b
https://github.com/c
https://github.com/d

但是網(wǎng)絡(luò)請求卻沒有發(fā)出

window.history.state：該變量可以獲取到跳轉(zhuǎn)當(dāng)前所處state時傳入的data:

window.onpopstate：這是一個事件，可以設(shè)置監(jiān)聽器，監(jiān)聽狀態(tài)被pop出來的時候的事件，其中go、back會觸發(fā)該事件

總結(jié)
根據(jù)以上幾個特性，就可以和上一章一樣，做出一個基于history模式的路由庫了

0x002 history庫說明

history是一個針對該特性封裝的庫，以下是示例代碼

import createHistory from "history/createBrowserHistory"

const history = createHistory()

// 監(jiān)聽 location 的變化
const unlisten = history.listen((location, action) => {
    // location is an object like window.location
    console.log(action, location.pathname, location.state)
})
// 修改 location
history.push("/home", { some: "state" })
// 取消監(jiān)聽
unlisten()

查看瀏覽器

0x003 react-route 
react-route+history+react就可以形成一個套餐了

源碼

import React from "react"
import ReactDom from "react-dom"
import { Router, Route, Switch,withRouter } from "react-router"
import createHistory from "history/createBrowserHistory"

class App extends React.Component{
    render(){
        console.log(this)
        return(
            

                

                    
                    
                    
                

                

                
                    ({render:()=>
首頁
})}>
                    ({render:()=>
文章
})}>
                    ({render:()=>
我的
})}>
                
            

        )
    }
}

const history = createHistory()

let MyApp=withRouter(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

效果

說明

App組件說明
App組件是跟組件，所有的組件都掛載在這個組件之下，在這個組件中，使用了兩個react-route的組件，一個是Switch，用來在路由變化的時候切換顯示的路由；一個是Route組件，一個Route代表一個頁面，也代表一個組件，這里用了三個Route,每個Route對應(yīng)一個路由，也對應(yīng)一個組件，這里的組件為了方便，直接用匿名函數(shù)實(shí)現(xiàn)，分別是：

()=>({render:()=>
首頁
}) // 對應(yīng)`/index`
()=>({render:()=>
文章
}) // 對應(yīng)`/article`
()=>({render:()=>
我的
}) // 對應(yīng)`/mine`

當(dāng)我們點(diǎn)擊相應(yīng)的按鈕的時候，將會調(diào)用this.props.history.push("${path}")來跳轉(zhuǎn)到對應(yīng)的頁面，其中${path}是我們設(shè)置的Route組件的path屬性。

history
通過history庫來做location監(jiān)聽和跳轉(zhuǎn)

withRoute是一個HOC，為App組件注入了history對象和路由相關(guān)的屬性，這樣可以屏蔽路由的存在，將App組件變成一個純粹的組件

Router組件接管了histoy對象，在該組件中完成了history的監(jiān)聽和路由的渲染

0x004 react-route-dom 
上面的調(diào)用太復(fù)雜了，需要手動創(chuàng)建history、調(diào)用this.props.history.push("/index")跳轉(zhuǎn)，那有沒有簡單點(diǎn)的呢？那就是react-router-dom，這個庫封裝了react-route、history庫，并提供了幾個實(shí)用的組件

源碼

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, Link, withRouter} from "react-router-dom"

class App extends React.Component {
    render() {
        return (
            

                

                    首頁
                    文章
                    我的
                

                

                
                     ({render: () => 
首頁
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                
            

        )
    }
}

let MyApp = withRouter(App)


ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

說明：

使用BrowserRouter替代Router，并且不再手動創(chuàng)建history

使用Link直接跳轉(zhuǎn)

該庫是在react-route和history庫的基礎(chǔ)之上封裝的，只是為了在dom環(huán)境下快速調(diào)用，并且提供了一個更加實(shí)用的組件而已，不能應(yīng)為這個庫而忘記了本質(zhì)。

0x005 總結(jié)

看透它，然后掌握它

0x006 資源

源碼

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

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

相關(guān)文章

  • Router入門0x202: 自己實(shí)現(xiàn) Router 頁面調(diào)度和特定頁面訪問

    摘要：概述上一章講了如何實(shí)現(xiàn)組件頁面切換，這一章講如何解決上一章出現(xiàn)的問題以及如何優(yōu)雅的實(shí)現(xiàn)頁面切換。在中監(jiān)聽了事件，這樣就可以在變化的時候，需要路由配置并調(diào)用。 0x000 概述 上一章講了SPA如何實(shí)現(xiàn)組件/頁面切換，這一章講如何解決上一章出現(xiàn)的問題以及如何優(yōu)雅的實(shí)現(xiàn)頁面切換。 0x001 問題分析 回顧一下上一章講的頁面切換，我們通過LeactDom.render(new Articl...

    dance 評論0 收藏0

  • Router入門0x205: react-route + redux + react 集成

    摘要：概述這一章終于大集成了集成源碼效果說明集成主要是用到庫集成源碼效果說明主要用到庫，是針對庫在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說明主要用到庫都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...

    yiliang 評論0 收藏0

  • Router入門0x204: react-route簡單栗子

    摘要：概述這一章仔細(xì)講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁文章我的首頁文章我的效果說明增強(qiáng)版，如果當(dāng)前路由命中，將會啟用或者。 0x000 概述 這一章仔細(xì)講一講 react-route 的使用栗子 0x001 簡單使用 源碼 import React from react import ReactDom from react-d...

    番茄西紅柿 評論0 收藏0

  • 手挽手帶你學(xué)React：三檔 React-router4.x的使用

    摘要：我們在內(nèi)部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機(jī)制，我們需要把值綁定進(jìn)入內(nèi)部。 手挽手帶你學(xué)React入門三檔,帶你學(xué)會使用Reacr-router4.x,開始創(chuàng)建屬于你的React項(xiàng)目 什么是React-router React Router 是一個基于 React 之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時保持頁面與 URL 間的同步。通俗一...

    SunZhaopeng 評論0 收藏0

  • React 入門實(shí)踐

    摘要：更多相關(guān)介紹請看這特點(diǎn)僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復(fù)代碼的使用組件化可組合一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。在使用后，就變得很容易維護(hù)，而且數(shù)據(jù)流非常清晰，容易解決遇到的。 歡迎移步我的博客閱讀：《React 入門實(shí)踐》 在寫這篇文章之前，我已經(jīng)接觸 React 有大半年了。在初步學(xué)習(xí) React 之后就正式應(yīng)用到項(xiàng)...

    shenhualong 評論0 收藏0

發(fā)表評論

0條評論

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