history 源码分析- createHashHistory
首先讲讲 hashHistory 是什么。
众所周知，在单页应用中，我们常用的两种路由策略是 hashHistory 和 browserHistory。其中 browserHistory 是古老的路由方式，从网页诞生一直沿用到现在，比如掘金个人文章页面的地址 https://juejin.im/user/57a0c28979bc440054958498/posts。而 hashHistory 是单页应用（SPA）出来之后，被广为使用的一种路由方式，它使用 # 后面的路径作为页面标识，如 https://i.ai.mi.com/h5/ai-xiaoai-3-years-fe/#/home。前者让我们更难判断项目业务路径（xxx/static/yy-prj-name/home），而后者可以根据 # 后面的路径轻松判断。
history 项目信息：
项目地址：https://github.com/ReactTraining/history
ReactTraining/history(react-router 同样出自 ReactTraining)
history 是 react-router 的核心依赖
rollup 打包
项目结构
项目核心代码在 modules 目录下，其中关键文件是 createBrowserHistory.js、createHashHistory.js、createMemoryHistory.js。
createHashHistory
createHashHistory.js 文件导出一个 createHashHistory 函数。
createHashHistory 用法如下：
// 下面给出的是默认值
createHashHistory({
basename: '', // The base URL of the app (see below)
hashType: 'slash', // The hash type to use (see below)
getUserConfirmation: (message, callback) => callback(window.confirm(message))
});
basename是路由改变时默认会带上的一串字符串hashType可以忽略，用默认的getUserConfirmation这个用来在使用history.block的时候处理页面离开的函数，history.block(blockInfo)blockInfo可以是一个函数或者字符串，函数执行的结果就是上面的 message，如果直接是字符串，则这个字符串就是传递过来的message；
createHashHistory(props) 返回下面一个对象，这就是我们平常在使用 react-router 的时候会用到的 props.history：
const history = {
length: globalHistory.length,
action: 'POP',
location: initialLocation,
createHref,
push,
replace,
go,
goBack,
goForward,
block,
listen,
};
我们对导出的各项逐个分析。
history.push
这个比较常用，push 代码简化之后就是下面这样。
参数：
path 对象或者字符串，字符串就是我们想要push的地址，如果是字符串则会被解析为一个对象(locationObj)。如果是对象则push之后的地址就是 /user/game?name=lxfriday#hahaha，可以容纳下面三个属性，。
history.push({
pathname: '/user/game',
search: 'name=lxfriday',
hash: 'hahaha'
})
比如 /user/game?name=lxfriday#hahaha，如果没有设置 basename，则push之后的地址就是 /user/game?name=lxfriday#hahaha，如果设置了 basename 为 /base，则push之后的地址为 /base/user/game?name=lxfriday#hahaha。
function push(path, state) {
const action = 'PUSH';
const location = createLocation(
path,
undefined,
undefined,
// 地址改变之前的 location 信息
history.location
);
transitionManager.confirmTransitionTo(
location,
action,
getUserConfirmation,
(ok) => {
if (!ok) return;
const path = createPath(location);
// encodedPath 编码之后的新 hash
// encodePath 加一个首 /
const encodedPath = encodePath(basename + path);
const hashChanged = getHashPath() !== encodedPath;
if (hashChanged) {
ignorePath = path;
// window.location.hash = encodedPath;
pushHashPath(encodedPath);
// history.location 是当前的
const prevIndex = allPaths.lastIndexOf(createPath(history.location));
// nextPaths 是最新的路由栈
const nextPaths = allPaths.slice(0, prevIndex + 1);
nextPaths.push(path);
allPaths = nextPaths;
setState({ action, location });
} else {
setState();
}
}
);
}
源码中 createLocation 表示创建一个 locationObj， path 是字符串或者对 象都可以，返回一个 path 对应的 locationObj。
比如 /user/game?name=lxfriday#haha 返回的是：
{
pathname: '/user/game',
search: '?name=lxfriday',
hash: '#haha'
}
关于 search 的 ? 和 hash 的 #，内部会自动添加。
transitionManager 是一个路由跳转处理器，在没有设置 history.block 的时候我们可以理解为直接调用 confirmTransitionTo 的最后一个回调函数，并且 ok 为 true。
createPath 可以把 locationObj 再拼回一个字符串地址：
encodePath 这里是给 basename + path 拼接的字符串添加一个首 /。
接下来比较 push 前后 hash 是否变化。getHashPath 是获取当前浏览器地址栏中的 hash 字符串，也就是当前的地址。
所以 getHashPath() !== encodedPath 比较的是浏览器当前的地址和即将要变更的地址，如果改变了，则会调用 pushHashPath(encodedPath) 把 encodedPath 也就是最新的地址应用到 浏览器地址栏。具体怎么应用呢：
function pushHashPath(path) {
window.location.hash = path;
}
没错就是这么简单，直接更改了 location.hash。
接下来要修改 history 内部自己维护的一个路由栈了：
const prevIndex = allPaths.lastIndexOf(createPath(history.location));
// nextPaths 是最新的路由栈
const nextPaths = allPaths.slice(0, prevIndex + 1);
nextPaths.push(path);
allPaths = nextPaths;
history.location 怎么理解？记住 history 里面的动力在 setState 调用之前都是旧的，也就是比前面使用 createLocation 创建的 location 旧一个节拍。
所以这里 prevIndex 是拿到push操作前的地址在路由栈中最后一次出现的位置。然后复制一个新数组，把最新的地址放到最后，重新赋值给路由栈，这样就达到了更改路由栈的目的，很简单吧。
接下来是 setState({ action, location });, action 是 PUSH 而 location 上面说了，是push操作后应该要达到的地址，setState 要做什么呢，很简单。
function setState(nextState) {
Object.assign(history, nextState);
// history 是在最底部声明的那个对象，与 window.history 很类似
history.length = globalHistory.length;
transitionManager.notifyListeners(history.location, history.action);
}
把 action 和 location 属性复制到 history 中，同时触发在 transitionManager 中添加的监听器（也就是路由变更的监听器）。
写了这么多，我发现用文字来描述源码是一件非常难说清楚的事情，因为代码经过多次封装之后，一行代码可能需要查还几个地方才能弄清楚，文字描述难免漏掉一些细节。如果你想更深入了解，可以加入我的交流群，在群内直接提问。
文章源码看起来会比较繁复难以理解，如果你对源码分析感兴趣，可以前往 bilibili 观看我录制的视频，另外下载一份源码到本地自己亲自调试看源码效果会更好哦。
bilibili视频地址：https://www.bilibili.com/video/BV1GA411B7mC
github 分析的源码地址：https://github.com/lxfriday/source-code-easy/tree/master/history-4.10.1
如果觉得看文章看视频依然没有看懂，也可以关注我的公众号，加入交流群，有问必答，欢迎交流讨论~~~
