這篇文章帶給大家的內容是關於從路由開始深入理解react-router 4.0源碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
react-router等前端路由的原理大致相同,可以實現無刷新的條件下切換顯示不同的頁面。路由的本質就是頁面的URL發生改變時,頁面的顯示結果可以根據URL的變化而變化,但是頁面不會刷新。透過前端路由可以實現單頁(SPA)應用,本文首先從前端路由的原理出發,詳細介紹了前端路由原理的變遷。接著從react-router4.0的源碼出發,深入理解react-router4.0是如何實現前端路由的。
透過Hash實作前端路由
透過H5的history實作前端路由
React- router4.0的使用
React-router4.0源碼分析
早期的前端路由是透過hash來實現的:
改變url的hash值是不會刷新頁面的。
因此可以透過hash來實現前端路由,從而實現無刷新的效果。 hash屬性位於location物件中,在目前頁面中,可以透過:
window.location.hash='edit'
來實現改變目前url的hash值。執行上述的hash賦值後,頁面的url改變。
賦值前:http://localhost:3000
賦值後:http://localhost:3000/#edit
在url中多了以#結尾的hash值,但是賦值前後雖然頁面的hash值改變導致頁面完整的url改變了,但是頁面是不會刷新的。此外,還有一個名為hashchange的事件,可以監聽hash的變化,我們可以透過下面兩種方式來監聽hash的變化:
window.onhashchange=function(event){ console.log(event); } window.addEventListener('hashchange',function(event){ console.log(event); })
當hash值改變時,輸出一個HashChangeEvent。此HashChangeEvent的具體值為:
{isTrusted: true, oldURL: "http://localhost:3000/", newURL: "http://localhost:3000/#teg", type: "hashchange".....}
有了監聽事件,且改變hash頁面不刷新,這樣我們就可以在監聽事件的回調函數中,執行我們展示和隱藏不同UI顯示的功能,從而實現前端路由。
此外,除了可以透過window.location.hash來改變目前頁面的hash值外,還可以透過html的a標籤來實現:
<a href="#edit">edit</a>
hash的兼容性較好,因此在早期的前端路由中大量的採用,但是使用hash也有很多缺點。
搜尋引擎對有hash的頁面不友善
#有hash的頁面內難以追蹤使用者行為
HTML5的History接口,History物件是一個底層接口,不繼承於任何的介面。 History介面允許我們操作瀏覽器會話歷史記錄。
History提供了一些屬性和方法。
History的屬性:
History.length: 傳回在會話歷史中有多少筆記錄,包含了目前會話頁面。另外如果開啟新的Tab,那麼這個length的值為1
History.state:
就是都會改變目前頁面顯示的url,但都不會刷新頁面。
不同點:pushState是壓入瀏覽器的會話歷史堆疊中,會使得History.length加1,而replaceState是取代目前的這條會話歷史,因此不會增加History.length.
(2)BOM物件historyhistory在瀏覽器的BOM物件模型中的重要屬性,history完全繼承了History接口,因此擁有History中的所有的屬性和方法。 這裡我們主要來看看history.length屬性以及history.pushState、history.replaceState方法。window.history.pushState({foo:'bar'}, "page 2", "bar.html");
此时,当前的url变为:
执行上述方法前:http://localhost:3000
执行上述方法后:http://localhost:3000/bar.html
如果我们输出window.history.state:
console.log(window.history.state);
// {foo:'bar'}
window.history.state就是我们pushState的第一个对象参数。
history.replaceState()方法不会改变hitroy的长度
console.log(window.history.length);
window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
console.log(window.history.length);
上述前后两次输出的window.history.length是相等的。
此外。
每次触发history.back()或者浏览器的后退按钮等,会触发一个popstate事件,这个事件在后退或者前进的时候发生:
window.onpopstate=function(event){ }
注意:
history.pushState和history.replaceState方法并不会触发popstate事件。
如果用history做为路由的基础,那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址,且如果页面发生回退back或者forward时,会触发popstate事件。
hisory为依据来实现路由的优点:
对搜索引擎友好
方便统计用户行为
缺点:
兼容性不如hash
需要后端做相应的配置,否则直接访问子页面会出现404错误
了解了前端路由实现的原理之后,下面来介绍一下React-router4.0。在React-router4.0的代码库中,根据使用场景包含了以下几个独立的包:
react-router : react-router4.0的核心代码
react-router-dom : 构建网页应用,存在DOM对象场景下的核心包
react-router-native : 适用于构建react-native应用
react-router-config : 配置静态路由
react-router-redux : 结合redux来配置路由,已废弃,不推荐使用。
在react-router4.0中,遵循Just Component的设计理念:
所提供的API都是以组件的形式给出。
比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。
下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。
用
basename: string 这个属性,是为当前的url再增加名为basename的值的子目录。
<BrowserRouter basename="test"/>
如果设置了basename属性,那么此时的:
http://localhost:3000 和 http://localhost:3000/test 表示的是同一个地址,渲染的内容相同。
getUserConfirmation: func 这个属性,用于确认导航的功能。默认使用window.confirm
forceRefresh: bool 默认为false,表示改变路由的时候页面不会重新刷新,如果当前浏览器不支持history,那么当forceRefresh设置为true的时候,此时每次去改变url都会重新刷新整个页面。
keyLength: number 表示location的key属性的长度,在react-router中每个url下都有为一个location与其对应,并且每一个url的location的key值都不相同,这个属性一般都使用默认值,设置的意义不大。
children: node children的属性必须是一个ReactNode节点,表示唯一渲染一个元素。
与
首先来看如何执行匹配,决定
path:当location中的url改变后,会与Route中的path属性做匹配,path决定了与路由或者url相关的渲染效果。
exact: 如果有exact,只有url地址完全与path相同,才会匹配。如果没有exact属性,url的地址不完全相同,也会匹配。
举例来说,当exact不设置时:
<Route path='/home' component={Home}/> <Route path='/home/first' component={First}/>
此时url地址为:http://localhost:3000/home/first 的时候,不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。
如果设置了exact:
<Route path='/home' component={Home}/>
只有http://localhost:3000/home/first 不会匹配Home组件,只有url地址完全与path相同,只有http://localhost:3000/home才能匹配Home组件成功。
strict :与exact不同,strict属性仅仅是对exact属性的一个补充,设置了strict属性后,严格限制了但斜线“/”。
举例来说,当不设置strict的时候:
<Route path='/home/' component={Home}/>
此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性:
<Route path='/home/' component={Home}/>
那么此时严格匹配斜线是否存在,http://localhost:3000/home 将无法匹配到Home组件。
当Route组件与某一url匹配成功后,就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢,Route的component、render、children决定渲染的内容。
component:该属性接受一个React组件,当url匹配成功,就会渲染该组件
render:func 该属性接受一个返回React Element的函数,当url匹配成功,渲染覆该返回的元素
children:与render相似,接受一个返回React Element的函数,但是不同点是,无论url与当前的Route的path匹配与否,children的内容始终会被渲染出来。
并且这3个属性所接受的方法或者组件,都会有location,match和history这3个参数。如果组件,那么组件的props中会存在从Link传递过来的location,match以及history。
to: string
to属性的值可以为一个字符串,跟html中的a标签的href一样,即使to属性的值是一个字符串,点击Link标签跳转从而匹配相应path的Route,也会将history,location,match这3个对象传递给Route所对应的组件的props中。
举例来说:
<Link to='/home'>Home</Link>
如上所示,当to接受一个string,跳转到url为'/home'所匹配的Route,并渲染其关联的组件内接受3个对象history,location,match。
这3个对象会在下一小节会详细介绍。
to: object
to属性的值也可以是一个对象,该对象可以包含一下几个属性:pathname、seacth、hash和state,其中前3个参数与如何改变url有关,最后一个state参数是给相应的改变url时,传递一个对象参数。
举例来说:
<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>
在上个例子中,to为一个对象,点击Link标签跳转后,改变后的url为:'/home?sort=name#edit'。 但是在与相应的Route匹配时,只匹配path为'/home'的组件,'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准,仅仅是做为参数传递到所匹配到的组件中,此外,state={a:1}也同样做为参数传递到新渲染的组件中。
介绍了
我们前面提到,Route匹配到相应的改变后的url,会渲染新组件,该新组件中的props中有history、location、match3个对象属性,其中hisotry对象属性最为关键。
同样以下面的例子来说明:
<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link> <Route exact path='/home' component={Home}/>
我们使用了
// props中的history action: "PUSH" block: ƒ block() createHref: ƒ createHref(location) go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ goForward() length: 12 listen: ƒ listen(listener) location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"} push: ƒ push(path, state) replace: ƒ replace(path, state)
从上面的属性明细中:
push:f 这个方法用于在js中改变url,之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。
replace: f 这个方法也是用于在js中改变url,replace方法映射于window.history中的replaceState方法。
block:f 这个方法也很有用,比如当用户离开当前页面的时候,给用户一个文字提示,就可以采用history.block("你确定要离开当前页吗?")这样的提示。
go / goBack / goForward
在组件props中history的go、goBack、goForward方法,分别window.history.go、window.history.back、window.history.forward对应。
action: "PUSH" || "POP"
action这个属性左右很大,如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url,那么在新组件中的action就是"PUSH",否则就是"POP".
action属性很有用,比如我们在做翻页动画的时候,前进的动画是SlideIn,后退的动画是SlideOut,我们可以根据组件中的action来判断采用何种动画:
function newComponent (props)=>{ return ( <ReactCSSTransitionGroup transitionAppear={true} transitionAppearTimeout={600} transitionEnterTimeout={600} transitionLeaveTimeout={200} transitionName={props.history.action==='PUSH'?'SlideIn':'SlideOut'} > <Component {...props}/> </ReactCSSTransitionGroup> ) }
location:object
在新组件的location属性中,就记录了从就组件中传递过来的参数,从上面的例子中,我们看到此时的location的值为:
hash: "#edit" key: "uxs9r5" pathname: "/home" search: "?sort=name" state: {a:1}
除了key这个用作唯一表示外,其他的属性都是我们从上一个Link标签中传递过来的参数。
在第三节中我们介绍了React-router的大致使用方法,读一读React-router4.0的源码。
这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的,因此设计到的组件为BrowserRouter、Router、Route和Link
从上一节的介绍中我们知道,点击Link标签传递给新渲染的组件的props中有一个history对象,这个对象的内容很丰富,比如:action、goBack、go、location、push和replace方法等。
React-router构建了一个History类,用于在window.history的基础上,构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。
React-router中将这个新的History类的构建方法,独立成一个node包,包名为history。
npm install history -s
可以通过上述方法来引入,我们来看看这个History类的实现。
const createBrowserHistory = (props = {}) => { const globalHistory = window.history; ...... //默认props中属性的值 const { forceRefresh = false, getUserConfirmation = getConfirmation, keyLength = 6, basename = '', } = props; const history = { length: globalHistory.length, action: "POP", location: initialLocation, createHref, push, replace, go, goBack, goForward, block, listen }; ---- (1) const basename = props.basename; const canUseHistory = supportsHistory(); ----(2) const createKey = () =>Math.random().toString(36).substr(2, keyLength); ----(3) const transitionManager = createTransitionManager(); ----(4) const setState = nextState => { Object.assign(history, nextState); history.length = globalHistory.length; transitionManager.notifyListeners(history.location, history.action); }; ----(5) const handlePopState = event => { handlePop(getDOMLocation(event.state)); }; const handlePop = location => { if (forceNextPop) { forceNextPop = false; setState(); } else { const action = "POP"; transitionManager.confirmTransitionTo( location, action, getUserConfirmation, ok => { if (ok) { setState({ action, location }); } else { revertPop(location); } } ); } }; ------(6) const initialLocation = getDOMLocation(getHistoryState()); let allKeys = [initialLocation.key]; ------(7) // 与pop相对应,类似的push和replace方法 const push ... replace ... ------(8) return history ------ (9) }
(1) 中指明了新的构建方法History所返回的history对象中所具有的属性。
(2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性,具体方法如下:
export const supportsHistory = () => { const ua = window.navigator.userAgent; if ( (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) && ua.indexOf("Mobile Safari") !== -1 && ua.indexOf("Chrome") === -1 && ua.indexOf("Windows Phone") === -1 ) return false; return window.history && "pushState" in window.history; };
从上述判别式我们可以看出,window.history在chrome、mobile safari和windows phone下是绝对支持的,但不支持安卓2.x以及安卓4.0
(3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位
(4)中 createTransitionManager方法,返回一个集成对象,对象中包含了关于history地址或者对象改变时候的监听函数等,具体代码如下:
const createTransitionManager = () => { const setPrompt = nextPrompt => { }; const confirmTransitionTo = ( location, action, getUserConfirmation, callback ) => { if (typeof getUserConfirmation === "function") { getUserConfirmation(result, callback); } else { callback(true); } } }; let listeners = []; const appendListener = fn => { let isActive = true; const listener = (...args) => { if (isActive) fn(...args); }; listeners.push(listener); return () => { isActive = false; listeners = listeners.filter(item => item !== listener); }; }; const notifyListeners = (...args) => { listeners.forEach(listener => listener(...args)); }; return { setPrompt, confirmTransitionTo, appendListener, notifyListeners };
};
setPrompt函数,用于设置url跳转时弹出的文字提示,confirmTransaction函数,会将当前生成新的history对象中的location,action,callback等参数,作用就是在回调的callback方法中,根据要求,改变传入的location和action对象。
接着我们看到有一个listeners数组,保存了一系列与url相关的监听事件数组,通过接下来的appendListener方法,可以往这个数组中增加事件,通过notifyListeners方法可以遍历执行listeners数组中的所有事件。
(5) setState方法,发生在history的url或者history的action发生改变的时候,此方法会更新history对象中的属性,同时会触发notifyListeners方法,传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。
(6)这个getDOMLocation方法就是根据当前在window.state中的值,生成新history的location属性对象,allKeys这是始终保持了在url改变时候的历史url相关联的key,保存在全局,allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时,会保持一个实时的更新。
(7) handlePop方法,用于处理“POP”事件,我们知道在window.history中点击后退等会触发“POP”事件,这里也是一样,执行action为“POP”,当后退的时候就会触发该函数。
(8)中包含了与pop方法类似的,push和replace方法,push方法同样做的事情就是执行action为“PUSH”(“REPLACE”),该变allKeys数组中的值,唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加,而action为“REPLACE”的方法replace则是替换掉当前的元素。
(9)返回这个新生成的history对象。
其实最难弄懂的是React-router中如何重新构建了一个history工厂函数,在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码,接着来看Link组件就很容易了。
首先Link组件类似于HTML中的a标签,目的也很简单,就是去主动触发改变url的方法,主动改变url的方法,从上述的history的介绍中可知为push和replace方法,因此Link组件的源码为:
class Link extends React.Component { handleClick = event => { ... const { history } = this.context.router; const { replace, to } = this.props; if (replace) { history.replace(replace); } else { history.push(to); } } }; render(){ const { replace, to, innerRef, ...props } = this.props; <a {...props} onClick={this.handleClick}/> } }
上述代码很简单,从React的context API全局对象中拿到history,然后如果传递给Link组件的属性中有replace为true,则执行history.replace(to),to 是一个包含pathname的对象,如果传递给Link组件的replace属性为false,则执行history.push(to)方法。
Route组件也很简单,其props中接受一个最主要的属性path,Route做的事情只有一件:
当url改变的时候,将path属性与改变后的url做对比,如果匹配成功,则渲染该组件的componet或者children属性所赋值的那个组件。
具体源码如下:
class Route extends React.Component { .... constructor(){ } render() { const { match } = this.state; const { children, component, render } = this.props; const { history, route, staticContext } = this.context.router; const location = this.props.location || route.location; const props = { match, location, history, staticContext }; if (component) return match ? React.createElement(component, props) : null; if (render) return match ? render(props) : null; if (typeof children === "function") return children(props); if (children && !isEmptyChildren(children)) return React.Children.only(children); return null; } }
state中的match就是是否匹配的标记,如果匹配当前的Route的path,那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。
Router组件中,是BrowserRouter、HashRouter等组件的底层组件。该组件中,定义了包含匹配规则match函数,以及使用了新history中的listener方法,来监听url的改变,从而,当url改变时,更改Router下不同path组件的isMatch结果。
class Router extends React.Component { componentWillMount() { const { children, history } = this.props //调用history.listen监听方法,该方法的返回函数是一个移除监听的函数 this.unlisten = history.listen(() => { this.setState({ match: this.computeMatch(history.location.pathname) }); }); } componentWillUnmount() { this.unlisten(); } render() { } }
上述首先在组件创建前调用了listener监听方法,来监听url的改变,实时的更新isMatch的结果。
本文从前端路由的原理出发,先后介绍了两种前端路由常用的方法,接着介绍了React-router的基本组件API以及用法,详细介绍了React-router的组件中新构建的history对象,最后结合React-router的API阅读了一下React-router的源码。
以上是從路由開始深入理解react-router 4.0源碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!