React Router源碼分析

前言

發現react-route用Link或Push跳轉時,沒有刷新頁面,可是Url變了，並且點擊瀏覽器自動的返回按鈕，Url變了可是頁面不刷新，怎麼作到的呢？因而本妹子就從這個方向研究了下react-route的源碼，給小夥伴們分享下。

解密-點擊返回按鈕但頁面不刷新

1、HashRouter 分析

經過location.hash來達到url變但頁面不刷新

location.hash=hash
複製代碼

而後在經過onhashchange監聽瀏覽器的返回事件

window.addEventListener('onhashchange', (event) => {
    changeDisplayName();//替換顯示的內容
});
複製代碼

2、 BrowserRouter 分析

經過pushState來達到url變但頁面不刷新，history.push實際是用原生history.pushState來實現的，history.replace實際是用原生history.replaceState來實現的。

changeDisplayName();//替換顯示的內容
window.history.pushState(null, null, newUrl);
複製代碼

而後在經過popstate監聽瀏覽器的返回事件

window.addEventListener('popstate', (event) => {
    changeDisplayName();//替換顯示的內容
});
複製代碼

案例

具體代碼爲codepen上的change page with history package

import React, { useEffect, useState, useRef, Component } from 'react';
const MapPage=()=>{
  return <div>MapPage</div>
}
const RankPage=()=>{
  return <div>RankPage</div>
}

function ConPage() {
  const[Page, setPage] = useState('rank');

  useEffect(()=>{
  
    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.page));
      let val;
      if(event.page=='rank') {
        val='rank'
      }else{
        val='map'
      }
      console.log('useEffect',val) 
      setPage(val)
    });
  },[])


  const _changePage = () => {
    if(Page=='rank') {
      setPage('map')
      window.history.pushState({page:'map'}, null, 'http://dev.jd.com:10086/con?pId=map');
     }else{
      setPage('rank')
      window.history.pushState({page:'rank'}, null, 'http://dev.jd.com:10086/con?pId=rank');
     }
  }

  return (
    <div> <div onClick={_changePage} className='btnTest'> 切換路由</div> {Page=='rank' && <RankPage /> } {Page=='map' && <MapPage /> } </div>
  )
}
export default ConPage
複製代碼

3、與 history 結合

popstate和onhashchange方法對android4.4.4不兼容，須要引入history這個npm包，裏面有兼容性代碼，若是判斷不兼容，就直接按照window.location.href跳轉。

具體代碼爲codepen上的change URL with history package

const history = History.createBrowserHistory();
const Location = history.location;

const MapPage=()=>{
  return <div>MapPage</div>
}
const RankPage=()=>{
  return <div>RankPage</div>
} 

function ConPage() {
  const[Page, setPage] = React.useState('rank');

  React.useEffect(()=>{
   history.listen((Location, action) => {
      console.log(action, Location.state);
      if(Location.state.page && Location.state.page=='map'){
        setPage('map')
      }else{
        setPage('rank')
      }
    });
  },[])


  const _changePage = () => {
    if(Page=='rank') {
      history.push('/con?pId=map',{  page: 'map' });
     }else{
      history.push('/con?pId=rank',{  page: 'rank' });
     }
  }

  return (
    <div> <button onClick={_changePage} className='btnTest'> 切換路由</button> {Page=='rank' &&<RankPage />} {Page=='map' &&<MapPage />} </div>
  )
}

ReactDOM.render(
<ConPage />, document.getElementById('root'), ) 複製代碼

4、查看顯示頁面

源碼

react-router裏的RouterContext.js

//TODO:直接用React.createContext也能夠
import createContext from "mini-create-react-context";

const createNamedContext = name => {
  const context = createContext();
  context.displayName = name;

  return context;
};

const context = /*#__PURE__*/ createNamedContext("Router");
export default context;

複製代碼

分析

Context.displayName解釋： context對象接受一個名爲 displayName 的property，類型爲字符串。React DevTools使用該字符串來標示context 要顯示的內容。

示例，下述組件在 DevTools 中將顯示爲 MyDisplayName：

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" 在 DevTools 中
<MyContext.Consumer> // "MyDisplayName.Consumer" 在 DevTools 中
複製代碼

Happy coding .. :)

相關連接

博客原文

react-router github

history github

popstate接口API

onHashchange兼容性

change URL with history package

Change URL without refreshing page