react-router的实现原理

鲨鱼辣椒s
254 阅读3分钟

1.1 History整体介绍

history是一个独立的第三方js库，可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。具体来说里面的history分为三类:

  • 老浏览器的history: 主要通过hash来实现，对应createHashHistory
  • 高版本浏览器: 通过html5里面的history，对应createBrowserHistory
  • node环境下: 主要存储在memeory里面，对应createMemoryHistory

上面针对不同的环境提供了三个API，但是三个API有一些共性的操作，将其抽象了一个公共的文件createHistory // 内部的抽象实现

image.png

上述这些方式是history内部最基础的方法，createHashHistory、createBrowserHistory、createMemoryHistory只是覆盖其中的某些方法而已。其中需要注意的是，此时的location跟浏览器原生的location是不相同的，最大的区别就在于里面多了key字段，history内部通过key来进行location的操作。

image.png

1.2 内部解析

三个API的大致的技术实现如下:

  • createBrowserHistory: 利用HTML5里面的history
  • createHashHistory: 通过hash来存储在不同状态下的history信息
  • createMemoryHistory: 在内存中进行历史记录的存储

1.2.1 执行URL前进

  • createBrowserHistory: pushState、replaceState
  • createHashHistory: location.hash=*** location.replace()
  • createMemoryHistory: 在内存中进行历史记录的存储

伪代码实现如下:

image.png

1.2.2 检测URL回退

  • createBrowserHistory: popstate
  • createHashHistory: hashchange
  • createMemoryHistory: 因为是在内存中操作，跟浏览器没有关系，不涉及UI层面的事情，所以可以直接进行历史信息的回退

伪代码实现如下:

image.png

1.2.3 state的存储

为了维护state的状态，将其存储在sessionStorage里面:

image.png

2. react-router的基本原理

一句话：实现URL与UI界面的同步。其中在react-router中，URL对应Location对象，而UI是由react components来决定的，这样就转变成location与components之间的同步问题。

3. react-router具体实现

react-router在history库的基础上，实现了URL与UI的同步，分为两个层次来描述具体的实现。

3.1 组件层面描述实现过程

在react-router中最主要的component是Router RouterContext Link，history库起到了中间桥梁的作用。

3.2 API层面描述实现过程

为了简单说明，只描述使用browserHistory的实现，hashHistory的实现过程是类似的，就不在说明。

4. 结语

目前react-router在项目中已有大量实践，其优点可以总结如下:

  • 风格: 与React融为一体,专为react量身打造，编码风格与react保持一致，例如路由的配置可以通过component来实现

  • 简单: 不需要手工维护路由state，使代码变得简单

  • 强大: 强大的路由管理机制，体现在如下方面

    • 路由配置: 可以通过组件、配置对象来进行路由的配置
    • 路由切换: 可以通过<Link> Redirect进行路由的切换
    • 路由加载: 可以同步记载，也可以异步加载，这样就可以实现按需加载

  • 使用方式: 不仅可以在浏览器端的使用，而且可以在服务器端的使用

当然react-router的缺点就是API不太稳定，在升级版本的时候需要进行代码变动。

avatar
文章
阅读
粉丝