发帖
雷达卡
云原生已是毋庸置疑的技术发展趋势之一。PaaS作为云原生体系的核心架构层，正被越来越多的公司应用，PaaS工程师也成为企业招聘热门资源。Go开发者，正是PaaS工程师的主要人才来源。本课程将带领大家，结合Go微服务打造PaaS平台的核心业务（包括Pod，service，deplyment，Ingress，存储，监控，中间件，镜像市场等），帮助Go工程师探索PaaS开发，挖掘职业新可能。
精读源码react-router前言React玩家根本都接触过react-router。截止目前为止，react-router库曾经收获了4.8w的star，也足以阐明这个库的受欢送水平，这篇文章就来揭秘react-router的运转原理，本篇源码解析基于react-router最新版本6.3，这个版本也已全面拥抱hooks，运用起来愈加丝滑。
降生在正式开端之前，我们先理解下为什么会有react-router的降生。
大约在2016年，单页面应用的概念被提出并疾速盛行起来，由于在此之前的多页面应用（MPA）用户想改动网页内容都需求等候阅读器的恳求刷新获取新的页面，而单页面应用推翻了这种形式，单页面应用完成了在仅加载一次资源，后续能够在不刷新阅读器的状况下动态改动页面展示内容从而让用户取得更好的体验。
单页面应用完成原理完成单页面应用（single-page application，缩写SPA）完成原理是，经过阅读器的API改动阅读器的url，然后在应用中监听阅读器url的变化，依据不同变化渲染不同的页面，而这个过程中的重点是不能刷新页面。
url变化分为两种形式：hash形式和browser形式。
hash形式url中#后面的即为hash值，而在改动阅读器的hash值时是不会刷新阅读器的，所以我们能够经过window.location.hash来改动hash值，然后经过监听阅读器事情hashchange来获取hash变化从而决议如何渲染页面。
缺陷：
- 假如拿来做路由的话，原来的锚点功用就不能用了；
- hash 的传参是基于 url 的，假如要传送复杂的数据，会有体积的限制；
window.history.pushState(state, title, url)// state：需求保管的数据，这个数据在触发popstate事情时，能够在event.state里获取// title：标题，根本没用，普通传 null// url：设定新的历史记载的 url。新的 url 与当前 url 的 origin 必需是一樣的，否则会抛出错误。url能够是绝对途径，也能够是相对途径。//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/window.history.replaceState(state, title, url)// 与 pushState 根本相同，但她是修正当前历史记载，而 pushState 是创立新的历史记载window.addEventListener("popstate", function() { // 监听阅读器行进后退事情，pushState 与 replaceState 办法不会触发});window.history.back() // 后退window.history.forward() // 行进window.history.go(1) // 行进一步，-2为后退两步，window.history.lengthk能够查看当前历史堆栈中页面的数量复制代码react-router完成有了上面的铺垫，react-router也就随之降生了，react-router就是基于上述两种形式分别做了完成。
架构react-router源码目前分四个包：
- react-router： react-router的中心包，下面的三个包都基于该包；
- react-router-dom：react-router用于web应用的包；
- react-router-v5-compat：如其名，为了兼容v5版本；
- react-router-native：用于rn项目；
history这里讲的history是react-router开发团队开发的history包，不是阅读器的history。当然，history包也是依托阅读器的history的API，最终返回的就是一个包装过后的history对象。
export interface History { readonly action: Action; // 操作类型 readonly location: Location; // location对象，包含state，search，path等 createHref(to: To): string; // 创立路由途径的办法，兼容非string类型的途径 push(to: To, state?: any): void; // 路由跳转指定途径 replace(to: To, state?: any): void; // 路由交换当前路由 go(delta: number): void; // 依据参数行进或后退 back(): void; // 相似阅读器后退按钮 forward(): void; // 相似阅读器行进按钮 listen(listener: Listener): () => void; // push和replace添加监听事情 block(blocker: Blocker): () => void; // push和replace添加拦截事情}复制代码在上面讲到的两种形式，history包分别完成了browser形式的createBrowserHistory和hash形式的createHashHistory
createBrowserHistory看一下返回的history，很简单，有的办法就是在阅读器的history的API上包了一层。
history: BrowserHistory = { get action() { // 运用get是为了只读，并且动态获取返回 return action; }, get location() { return location; }, createHref, push, replace, go, // 基于阅读器的API的go办法完成 back() { go(-1); }, forward() { go(1); }, listen(listener) { // 添加监听事情 return listeners.push(listener); }, block(blocker) {...}, // 添加拦截事情 };复制代码有没有发现，真正有点复杂度的就是push和replace办法了，我们接下来重点看一下push的完成，这个能够说是history最中心的API。
push function push(to: To, state?: any) { let nextAction = Action.Push; // 将action设置为PUSH let nextLocation = getNextLocation(to, state); // 创立一个新的location对象 function retry() { // 拦截后重新push push(to, state); } if (allowTx(nextAction, nextLocation, retry)) { // 判别能否有拦截 let [historyState, url] = getHistoryStateAndUrl(nextLocation, index + 1); // 基于新的location和新的index格式化 try { globalHistory.pushState(historyState, "", url); // 借助阅读器API改动url } catch (error) { window.location.assign(url); // 错误捕获就基于url刷新页面 } applyTx(nextAction); // 触发监听事情 } }复制代码push办法整体看下来，思绪很明晰，就是创立一个新的location对象，没有拦截就在原来的历史记载根底再添加一条，并且触发监听事情。
replace思绪和push根本分歧，主要是把globalHistory.pushState交换成了globalHistory.replace3State。
除了push和replace之外，还有个看点，就是popstate。
popstate借助MDN的一句话： 调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事情。popstate 事情只会在阅读器某些行为下触发，比方点击后退按钮（或者在 JavaScript 中调用 history.back()，history.go() 办法）。即，在同一文档的两个历史记载条目之间导航会触发该事情。
在历史记载之间切换时，url会变化，所以react-router也要加以监听并处置：
function handlePop() { if (blockedPopTx) { blockers.call(blockedPopTx); // 假如有拦截，就执行拦截的函数 blockedPopTx = null; } else { let nextAction = Action.Pop; let [nextIndex, nextLocation] = getIndexAndLocation(); if (blockers.length) { // 当有拦截的状况 if (nextIndex != null) { let delta = index - nextIndex; // 经过当前下标和要跳转的下标计算出跳转步数 if (delta) { // Revert the POP blockedPopTx = { // 将当前有拦截的路由信息存储下来 action: nextAction, location: nextLocation, retry() { go(delta * -1); }, }; go(delta); // 当有拦截的状况再次跳转回去，就会再次触发popstate，这样就能够执行拦截函数了 } } else {...} } else { // 没有拦截的状况，只需求触发添加的监听事情，其他的阅读器会自行处置 applyTx(nextAction); } } } window.addEventListener('popstate', handlePop); // 添加popstate监听函数复制代码当经过go，back，forward等API触发popstate时，假如没有拦截器的状况下，只需求执行相关的监听函数，然后让阅读器跳转即可。但是假如有拦截器，这里的处置是，将跳转的路由信息存储下来，然后经过go跳转回之前页面，这时又会触发popstate，由于代码判别逻辑这次就会执行拦截器函数，而不会再次触发跳转。
这个拦截的设计能够说是很巧妙，巧妙在：
Q: 它为什么要在触发第二次popstate，并在第二次做拦截，第一次不行吗？
A: 答案肯定是不行，由于popstate是在跳转行为之后触发的，此时做拦截毫无意义。react-router的做法是，既然你跳过去了，那我就让你再跳回来，给你一种没有跳转的假象。你说是不是秀儿🐶。
createHashHistoryreact-router的hash形式也是运用了阅读器history相关的API的。和browser形式的主要区别是，url的path处置会多一个'#'的处置，还有就是多了个hashchange的监听函数。
window.addEventListener('hashchange', () => { let [, nextLocation] = getIndexAndLocation(); // Ignore extraneous hashchange events. if (createPath(nextLocation) !== createPath(location)) { handlePop(); } });复制代码这里hashchange的处置和popstate的处置是一样的，都是调用的handlePop函数。
react-routerhistory包讲完了，接下来看下react-router是怎样借助history完成渲染的，react-router也有browser形式和hash形式两种，分别对应BrowserRouter和HashRouter。
来看一段，react-router v6常规的业务写法：
Go 开发者的涨薪通道：自主开发 PaaS 平台核心功能
download链接：https://pan.baidu.com/s/1JKeWYvVMNgabwwYGfgpfuw?pwd=ercn
提取码：ercn
--来自百度网盘超级会员V5的分享
提升卡
置顶卡
沉默卡
变色卡
抢沙发
千斤顶
显身卡
京公网安备 11010802022788号
