监听router_深入揭秘前端路由本质,手写 mini-router
前言
前端路由一直是一个很经典的话题,不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 react-router 来一起揭开路由的神秘面纱。
通过本文,你可以学习到:
- 前端路由本质上是什么。
- 前端路由里的一些坑和注意点。
- hash 路由和 history 路由的区别。
- Router 组件和 Route 组件分别是做什么的。
路由的本质
简单来说,浏览器端路由其实并不是真实的网页跳转(和服务器没有任何交互),而是纯粹在浏览器端发生的一系列行为,本质上来说前端路由就是:
对 url 进行改变和监听,来让某个 dom 节点显示对应的视图。
仅此而已。新手不要被路由这个概念给吓到。
路由的区别
一般来说,浏览器端的路由分为两种:
- hash 路由,特征是 url 后面会有 # 号,如 baidu.com/#foo/bar/baz。
- history 路由,url 和普通路径没有差异。如 baidu.com/foo/bar/baz。
我们已经讲过了路由的本质,那么实际上只需要搞清楚两种路由分别是如何 改变,并且组件是如何监听并完成视图的展示,一切就真相大白了。
不卖关子,先分别谈谈两种路由用什么样的 api 实现前端路由:
hash
通过 location.hash = 'foo' 这样的语法来改变,路径就会由 baidu.com 变更为 baidu.com/#foo。
通过 window.addEventListener('hashchange') 这个事件,就可以监听到 hash 值的变化。
history
其实是用了 history.pushState 这个 API 语法改变,它的语法乍一看比较怪异,先看下 mdn 文档里对它的定义:
“
history.pushState(state, title[, url])
”
其中 state 代表状态对象,这让我们可以给每个路由记录创建自己的状态,并且它还会序列化后保存在用户的磁盘上,以便用户重新启动浏览器后可以将其还原。
title 当前没啥用。
url 在路由中最重要的 url 参数反而是个可选参数,放在了最后一位。
通过 history.pushState({}, '', foo),可以让 baidu.com 变化为baidu.com/foo。
为什么路径更新后,浏览器页面不会重新加载?
这里我们需要思考一个问题,平常通过 location.href = 'baidu.com/foo' 这种方式来跳转,是会让浏览器重新加载页面并且请求服务器的,但是 history.pushState 的神奇之处就在于它可以让 url 改变,但是不重新加载页面,完全由用户决定如何处理这次 url 改变。
因此,这种方式的前端路由必须在支持 histroy API 的浏览器上才可以使用。
为什么刷新后会 404?
本质上是因为刷新以后是带着 baidu.com/foo 这个页面去请求服务端资源的,但是服务端并没有对这个路径进行任何的映射处理,当然会返回 404,处理方式是让服务端对于"不认识"的页面,返回 index.html,这样这个包含了前端路由相关js代码的首页,就会加载你的前端路由配置表,并且此时虽然服务端给你的文件是首页文件,但是你的 url 上是 baidu.com/foo,前端路由就会加载 /foo 这个路径相对应的视图,完美的解决了 404 问题。
history 路由的监听也有点坑,浏览器提供了window.addEventListener('popstate') 事件,但是它只能监听到浏览器回退和前进所产生的路由变化,对于主动的 pushState 却监听不到。解决方案当然有,下文实现 react-router 的时候再细讲~
实现 react-mini-router
本文实现的 react-router 基于 history 版本,用最小化的代码还原路由的主要功能,所以不会有正则匹配或者嵌套子路由等高阶特性,回归本心,从零到一实现最简化的版本。
实现 history
对于 history 难用的官方 API,我们专门抽出一个小文件对它进行一层封装,对外提供:
- history.push。
- history.listen。
这两个 API,减轻用户的心智负担。
我们利用观察者模式封装了一个简单的 listen API,让用户可以监听到history.push 所产生的路径改变。
// 存储 history.listen 的回调函数let listeners: Listener[] = [];function listen(fn: Listener) { listeners.push(fn); return function() { listeners = listeners.filter(listener => listener !== fn); };}
这样外部就可以通过:
history.listen(location => { console.log('changed', location);});
这样的方式感知到路由的变化了,并且在 location 中,我们还提供了 state、pathname、search 等关键的信息。
实现改变路径的核心方法 push 也很简单:
function push(to: string, state?: State) { // 解析用户传入的 url // 分解成 pathname、search 等信息 location = getNextLocation(to, state); // 调用原生 history 的方法改变路由 window.history.pushState(state, '', to); // 执行用户传入的监听函数 listeners.forEach(fn => fn(location));}
在 history.push('foo') 的时候,本质上就是调用了 window.history.pushState 去改变路径,并且通知 listen 所挂载的回调函数去执行。
当然,别忘了用户点击浏览器后退前进按钮的行为,也需要用 popstate 这个事件来监听,并且执行同样的处理:
// 用于处理浏览器前进后退操作window.addEventListener('popstate', () => { location = getLocation(); listeners.forEach(fn => fn(location));});
接下来我们需要实现 Router 和 Route 组件,你就会看到它们是如何和这个简单的 history 库结合使用了。
实现 Router
Router 的核心原理就是通过 Provider 把 location 和 history 等路由关键信息传递给子组件,并且在路由发生变化的时候要让子组件可以感知到:
import React, { useState, useEffect, ReactNode } from 'react';import { history, Location } from './history';interface RouterContextProps { history: typeof history; location: Location;}export const RouterContext = React.createContext( null,);export const Router: React.FC = ({ children }) => { const [location, setLocation] = useState(history.location); // 初始化的时候 订阅 history 的变化 // 一旦路由发生改变 就会通知使用了 useContext(RouterContext) 的子组件去重新渲染 useEffect(() => { const unlisten = history.listen(location => { setLocation(location); }); return unlisten; }, []); return ( {children} );};
注意看注释的部分,我们在组件初始化的时候利用 history.listen 监听了路由的变化,一旦路由发生改变,就会调用 setLocation 去更新 location 并且通过Provider 传递给子组件。
并且这一步也会触发 Provider 的 value 值的变化,通知所有用 useContext 订阅了history 和 location 的子组件去重新 render。
实现 Route
Route 组件接受 path 和 children 两个 prop,本质上就决定了在某个路径下需要渲染什么组件,我们又可以通过 Router 的 Provider 传递下来的 location 信息拿到当前路径,所以这个组件需要做的就是判断当前的路径是否匹配,渲染对应组件。
import { ReactNode } from 'react';import { useLocation } from './hooks';interface RouteProps { path: string; children: ReactNode;}export const Route = ({ path, children }: RouteProps) => { const { pathname } = useLocation(); const matched = path === pathname; if (matched) { return children; } return null;};
这里的实现比较简单,路径直接用了全等,实际上真正的实现考虑的情况比较复杂,使用了 path-to-regexp 这个库去处理动态路由等情况,但是核心原理其实就是这么简单。
实现 useLocation、useHistory
这里就很简单了,利用 useContext 简单封装一层,拿到 Router 传递下来的history 和 location 即可。
import { useContext } from 'react';import { RouterContext } from './Router';export const useHistory = () => { return useContext(RouterContext)!.history;};export const useLocation = () => { return useContext(RouterContext)!.location;};
实现验证 demo
至此为止,以下的路由 demo 就可以跑通了:
import React, { useEffect } from 'react';import { Router, Route, useHistory } from 'react-mini-router';const Foo = () => 'foo';const Bar = () => 'bar';const Links = () => { const history = useHistory(); const go = (path: string) => { const state = { name: path }; history.push(path, state); }; return (
go('foo')}>foo go('bar')}>bar
);};export default () => { return (
结语
通过本文的学习,相信小伙伴们已经搞清楚了前端路由的原理,其实它只是对浏览器提供 API 的一个封装,以及在框架层去联动做对应的渲染,换个框架 vue-router 也是类似的原理。
喜欢的老铁,加个关注!今后会分享更多的前端干货,欢迎点赞转发关注[比心]
本文源码地址:https://github.com/sl1673495/react-mini-router
监听router_深入揭秘前端路由本质,手写 mini-router相关推荐
- 前端面试高频手写代码题
前端面试高频手写代码题 一.实现一个解析URL参数的方法 方法一:String和Array的相关API 方法二: Web API 提供的 URL 方法三:正则表达式+string.replace方法 ...
- 小白前端之路:手写一个简单的vue-router这几年,好像过的好快,怀念我的大学生活。 - 连某人 大三实习生,之前写过简单MVVM框架、简单的vuex、但是看了vue-router的源码(看了
这几年,好像过的好快,怀念我的大学生活. 连某人 大三实习生,之前写过简单MVVM框架.简单的vuex.但是看了vue-router的源码(看了大概)之后就没有写,趁着周末不用工作(大三趁着不开学出来 ...
- 高级前端必会手写面试题及答案
循环打印红黄绿 下面来看一道比较典型的问题,通过这个问题来对比几种异步编程方法:红灯 3s 亮一次,绿灯 1s 亮一次,黄灯 2s 亮一次:如何让三个灯不断交替重复亮灯? 三个亮灯函数: functi ...
- 社招前端必会手写面试题集锦
查找字符串中出现最多的字符和个数 例: abbcccddddd -> 字符最多的是d,出现了5次 let str = "abcabcabcbbccccc"; let num ...
- 高级前端常考手写面试题(必备)
实现单例模式 核心要点: 用闭包和Proxy属性拦截 function proxy(func) {let instance;let handler = {constructor(target, arg ...
- 前端面试高频手写题目
高频手写题目 面试高频手写题目 1 实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 手写简化版: // func是用户传入需要防抖的函 ...
- 百度前端必会手写面试题整理
请实现一个 add 函数,满足以下功能 add(1); // 1 add(1)(2); // 3 add(1)(2)(3):// 6 add(1)(2, 3); // 6 add(1, 2)(3); ...
- 前端常考手写面试题汇总
实现一个函数判断数据类型 function getType(obj) {if (obj === null) return String(obj);return typeof obj === 'obje ...
- 社招前端常考手写面试题总结
手写 Promise const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTE ...
最新文章
- 提高建模效率,改变手工作坊式生产,AutoML的技术研究与应用进展如何了?
- assume用法及意思_英语单词Think, Suppose, Assume, Presume的区别
- Just write about
- 多线程的那点儿事(之读写锁)
- 服务器宕机不再愁!Docker 内置功能帮您解决
- [转]在EntityFramework6中执行SQL语句
- 关于软件测试学习的心得
- 线性渐变和放射性渐变
- 区块链与商业银行中的区块链运用
- 木兰词·拟古决绝词柬友
- c语言 乱码转化为16进制_编码格式介绍及C语言处理汉字编码
- 微信小程序实现下载功能(以下载视频为例)
- 内网穿透工具-Ngrok
- 解决Git出现rpc failed 问题
- 【酒店管理系统】(一)需求分析
- 论区块链技术的未来应用场景
- 83事件对象的作用——阻止事件默认行为
- 【ES】windows启动
- 解锁网易云音乐的灰色歌曲、会员歌曲
- 基于SpringBoot与LayUI的后台管理系统
热门文章
- LIBCMTD.lib与libcpmtd冲突的解决方法。
- (转)Web Services使用多态(XmlInclude) ,支持自定义类型
- 转载(四).Net Framework中的委托与事件
- 虚拟机 NAT模式与桥接模式的区别
- JSP中get和post请求方式的区别及乱码解决方法
- 计算机院校人气排名,2019高校人气排行榜_最具人气大学排行榜7月榜单发布 清华大学排第一...
- 查询 oracle_ORACLE数据库查询语句
- php流程控制作业题,php流程控制
- 查看ie保存的表单_小学信息技术gt;搜索保存网页教师资格证面试模板
- 海上瓶子下有东西吗_洗衣液瓶子我从来不扔,瓶身这样剪几刀,解决了很多家庭的大烦恼...