react實現瀏覽器自動刷新的示例代碼

Posted on 2021-04-23 by WalkonNet

在單頁應用如此流行的今天，曾經令人驚嘆的前端路由已經成為各大框架的基礎標配，每個框架都提供瞭強大的路由功能，導致路由實現變的復雜。想要搞懂路由內部實現還是有些困難的，但是如果隻想瞭解路由實現基本原理還是比較簡單的。本文針對前端路由主流的實現方式 hash 和 history，提供瞭原生JS/React/Vue 共計六個版本供參考，每個版本的實現代碼約 25~40 行左右（含空行）。

什麼是前端路由？

路由的概念來源於服務端，在服務端中路由描述的是 URL 與處理函數之間的映射關系。

在 Web 前端單頁應用 SPA(Single Page Application)中，路由描述的是 URL 與 UI 之間的映射關系，這種映射是單向的，即 URL 變化引起 UI 更新（無需刷新頁面）。

如何實現前端路由？

要實現前端路由，需要解決兩個核心問題：

如何改變 URL 卻不引起頁面刷新？如何檢測 URL 變化瞭？

下面分別使用 hash 和 history 兩種實現方式回答上面的兩個核心問題。

hash 實現

hash 是 URL 中 hash (#) 及後面的那部分，常用作錨點在頁面內進行導航，改變 URL 中的 hash 部分不會引起頁面刷新
通過 hashchange 事件監聽 URL 的變化，改變 URL 的方式隻有這幾種：通過瀏覽器前進後退改變 URL、通過標簽改變 URL、通過window.location改變URL，這幾種情況改變 URL 都會觸發 hashchange 事件

history 實現

history 提供瞭 pushState 和 replaceState 兩個方法，這兩個方法改變 URL 的 path 部分不會引起頁面刷新
history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過瀏覽器前進後退改變 URL 時會觸發 popstate 事件，通過pushState/replaceState或標簽改變 URL 不會觸發 popstate 事件。好在我們可以攔截 pushState/replaceState的調用和標簽的點擊事件來檢測 URL 變化，所以監聽 URL 變化可以實現，隻是沒有 hashchange 那麼方便。

原生JS版前端路由實現

基於上節討論的兩種實現方式，分別實現 hash 版本和 history 版本的路由，示例使用原生 HTML/JS 實現，不依賴任何框架。

基於 hash 實現

運行效果：

HTML 部分：

<body>
  <ul>
ref="">    <!-- 定義路由 -->
    <li><a href="#/home" rel="external nofollow" >home</a></li>
    <li><a href="#/about" rel="external nofollow" >about</a></li>
 
ref="">    <!-- 渲染路由對應的 UI -->
    <div id="routeView"></div>
  </ul>
</body>

JavaScript 部分：

// 頁面加載完不會觸發 hashchange，這裡主動觸發一次 hashchange 事件
window.addEventListener('DOMContentLoaded', onLoad)
// 監聽路由變化
window.addEventListener('hashchange', onHashChange)
 
// 路由視圖
var routerView = null
 
function onLoad () {
  routerView = document.querySelector('#routeView')
  onHashChange()
}
 
// 路由變化時，根據路由渲染對應 UI
function onHashChange () {
  switch (location.hash) {
    case '#/home':
      routerView.innerHTML = 'Home'
      return
    case '#/about':
      routerView.innerHTML = 'About'
      return
    default:
      return
  }
}

基於 history 實現

運行效果：

HTML 部分：

<body>
  <ul>
    <li><a href='/home'>home</a></li>
    <li><a href='/about'>about</a></li>
 
    <div id="routeView"></div>
  </ul>
</body>

JavaScript 部分：

// 頁面加載完不會觸發 hashchange，這裡主動觸發一次 hashchange 事件
window.addEventListener('DOMContentLoaded', onLoad)
// 監聽路由變化
window.addEventListener('popstate', onPopState)
 
// 路由視圖
var routerView = null
 
function onLoad () {
  routerView = document.querySelector('#routeView')
  onPopState()
 
 href="">  // 攔截 <a> 標簽點擊事件默認行為， 點擊時使用 pushState 修改 URL並更新手動 UI，從而實現點擊鏈接更新 URL 和 UI 的效果。
  var linkList = document.querySelectorAll('a[href]')
  linkList.forEach(el => el.addEventListener('click', function (e) {
    e.preventDefault()
    history.pushState(null, '', el.getAttribute('href'))
    onPopState()
  }))
}
 
// 路由變化時，根據路由渲染對應 UI
function onPopState () {
  switch (location.pathname) {
    case '/home':
      routerView.innerHTML = 'Home'
      return
    case '/about':
      routerView.innerHTML = 'About'
      return
    default:
      return
  }
}

React 版前端路由實現

基於 hash 實現

運行效果：

使用方式和 react-router 類似：

  <BrowserRouter>
    <ul>
      <li>
        <Link to="/home">home</Link>
      </li>
      <li>
        <Link to="/about">about</Link>
      </li>
    </ul>
 
    <Route path="/home" render={() => <h2>Home</h2>} />
    <Route path="/about" render={() => <h2>About</h2>} />
  </BrowserRouter>

BrowserRouter 實現

export default class BrowserRouter extends React.Component {
  state = {
    currentPath: utils.extractHashPath(window.location.href)
  };
 
  onHashChange = e => {
    const currentPath = utils.extractHashPath(e.newURL);
    console.log("onHashChange:", currentPath);
    this.setState({ currentPath });
  };
 
  componentDidMount() {
    window.addEventListener("hashchange", this.onHashChange);
  }
 
  componentWillUnmount() {
    window.removeEventListener("hashchange", this.onHashChange);
  }
 
  render() {
    return (
      <RouteContext.Provider value={{currentPath: this.state.currentPath}}>
        {this.props.children}
      </RouteContext.Provider>
    );
  }
}

Route 實現

export default ({ path, render }) => (
  <RouteContext.Consumer>
    {({currentPath}) => currentPath === path && render()}
  </RouteContext.Consumer>
);

Link 實現

export default ({ to, ...props }) => <a {...props} href={"#" + to} />;

基於 history 實現

運行效果：

使用方式和 react-router 類似：

  <HistoryRouter>
    <ul>
      <li>
        <Link to="/home">home</Link>
      </li>
      <li>
        <Link to="/about">about</Link>
      </li>
    </ul>
 
    <Route path="/home" render={() => <h2>Home</h2>} />
    <Route path="/about" render={() => <h2>About</h2>} />
  </HistoryRouter>

HistoryRouter 實現

export default class HistoryRouter extends React.Component {
  state = {
    currentPath: utils.extractUrlPath(window.location.href)
  };
 
  onPopState = e => {
    const currentPath = utils.extractUrlPath(window.location.href);
    console.log("onPopState:", currentPath);
    this.setState({ currentPath });
  };
 
  componentDidMount() {
    window.addEventListener("popstate", this.onPopState);
  }
 
  componentWillUnmount() {
    window.removeEventListener("popstate", this.onPopState);
  }
 
  render() {
    return (
      <RouteContext.Provider value={{currentPath: this.state.currentPath, onPopState: this.onPopState}}>
        {this.props.children}
      </RouteContext.Provider>
    );
  }
}

Route 實現

export default ({ path, render }) => (
  <RouteContext.Consumer>
    {({currentPath}) => currentPath === path && render()}
  </RouteContext.Consumer>
);

Link 實現

export default ({ to, ...props }) => (
  <RouteContext.Consumer>
    {({ onPopState }) => (
      <a
        href=""
        {...props}
        onClick={e => {
          e.preventDefault();
          window.history.pushState(null, "", to);
          onPopState();
        }}
      />
    )}
  </RouteContext.Consumer>
);

Vue 版本前端路由實現

基於 hash 實現

運行效果：

使用方式和 vue-router 類似（vue-router 通過插件機制註入路由，但是這樣隱藏瞭實現細節，為瞭保持代碼直觀，這裡沒有使用 Vue 插件封裝）：

    <div>
      <ul>
        <li><router-link to="/home">home</router-link></li>
        <li><router-link to="/about">about</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
 
const routes = {
  '/home': {
    template: '<h2>Home</h2>'
  },
  '/about': {
    template: '<h2>About</h2>'
  }
}
 
const app = new Vue({
  el: '.vue.hash',
  components: {
    'router-view': RouterView,
    'router-link': RouterLink
  },
  beforeCreate () {
    this.$routes = routes
  }
})

router-view 實現:

<template>
  <component :is="routeView" />
</template>
 
<script>
import utils from '~/utils.js'
export default {
  data () {
    return {
      routeView: null
    }
  },
  created () {
    this.boundHashChange = this.onHashChange.bind(this)
  },
  beforeMount () {
    window.addEventListener('hashchange', this.boundHashChange)
  },
  mounted () {
    this.onHashChange()
  },
  beforeDestroy() {
    window.removeEventListener('hashchange', this.boundHashChange)
  },
  methods: {
    onHashChange () {
      const path = utils.extractHashPath(window.location.href)
      this.routeView = this.$root.$routes[path] || null
      console.log('vue:hashchange:', path)
    }
  }
}
</script>

router-link 實現:

<template>
  <a @click.prevent="onClick" href=''><slot></slot></a>
</template>
 
<script>
export default {
  props: {
    to: String
  },
  methods: {
    onClick () {
      window.location.hash = '#' + this.to
    }
  }
}
</script>

基於 history 實現

運行效果：

使用方式和 vue-router 類似：

    <div>
      <ul>
        <li><router-link to="/home">home</router-link></li>
        <li><router-link to="/about">about</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
 
const routes = {
  '/home': {
    template: '<h2>Home</h2>'
  },
  '/about': {
    template: '<h2>About</h2>'
  }
}
 
const app = new Vue({
  el: '.vue.history',
  components: {
    'router-view': RouterView,
    'router-link': RouterLink
  },
  created () {
    this.$routes = routes
    this.boundPopState = this.onPopState.bind(this)
  },
  beforeMount () {
    window.addEventListener('popstate', this.boundPopState) 
  },
  beforeDestroy () {
    window.removeEventListener('popstate', this.boundPopState) 
  },
  methods: {
    onPopState (...args) {
      this.$emit('popstate', ...args)
    }
  }
})

router-view 實現：

<template>
  <component :is="routeView" />
</template>
 
<script>
import utils from '~/utils.js'
export default {
  data () {
    return {
      routeView: null
    }
  },
  created () {
    this.boundPopState = this.onPopState.bind(this)
  },
  beforeMount () {
    this.$root.$on('popstate', this.boundPopState)
  },
  beforeDestroy() {
    this.$root.$off('popstate', this.boundPopState)
  },
  methods: {
    onPopState (e) {
      const path = utils.extractUrlPath(window.location.href)
      this.routeView = this.$root.$routes[path] || null
      console.log('[Vue] popstate:', path)
    }
  }
}
</script>

router-link 實現:

<template>
  <a @click.prevent="onClick" href=''><slot></slot></a>
</template>
 
<script>
export default {
  props: {
    to: String
  },
  methods: {
    onClick () {
      history.pushState(null, '', this.to)
      this.$root.$emit('popstate')
    }
  }
}
</script>

小結

前端路由的核心實現原理很簡單，但是結合具體框架後，框架增加瞭很多特性，如動態路由、路由參數、路由動畫等等，這些導致路由實現變的復雜。本文去粗取精隻針對前端路由最核心部分的實現進行分析，並基於 hash 和 history 兩種模式，分別提供原生JS/React/Vue 三種實現，共計六個實現版本供參考，希望對你有所幫助。

所有的示例的代碼放在 Github 倉庫：https://github.com/whinc/web-router-principle

參考

詳解單頁面路由的幾種實現原理

單頁面應用路由實現原理：以 React-Router 為例

到此這篇關於react實現瀏覽器自動刷新的示例代碼的文章就介紹到這瞭,更多相關react 瀏覽器自動刷新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

react實現瀏覽器自動刷新的示例代碼

什麼是前端路由？

如何實現前端路由？

hash 實現

history 實現

原生JS版前端路由實現

基於 hash 實現

基於 history 實現

React 版前端路由實現

基於 hash 實現

基於 history 實現

Vue 版本前端路由實現

基於 hash 實現

基於 history 實現

小結

參考

推薦閱讀：

發佈留言取消回覆

近期文章

什麼是前端路由？

如何實現前端路由？

hash 實現

history 實現

原生JS版前端路由實現

基於 hash 實現

基於 history 實現

React 版前端路由實現

基於 hash 實現

基於 history 實現

Vue 版本前端路由實現

基於 hash 實現

基於 history 實現

小結

參考

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆