注册有礼

React实现浏览器自动刷新的方法是什么

Admin 2022-10-20 群英技术资讯 527 次浏览

上一篇：如何用jquery插件完成一个堆叠式菜单 下一篇：如何用vue框架写个接元宝小游戏
本篇内容介绍了“React实现浏览器自动刷新的方法是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！


在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式 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实现浏览器自动刷新的方法是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。 群英智防CDN，智能加速解决方案
标签： react浏览器自动刷新

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：如何用jquery插件完成一个堆叠式菜单 下一篇：如何用vue框架写个接元宝小游戏

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服