工作两三年了，整不明白 React-router 路由本质？

青旅半醒 2023-01-14 14:59 61阅读 0赞

阅读源码小 tips：从整体到细节，刚开始不要太拘泥于一行代码的实现，先从整体去理解，理解好各自的关系，再去读源码。

首先，我们先不纠结于源码细节。先用最简单的话来概括一下 React-router 到底做了什么？

**本质上， React-Router 就是在页面 URL 发生变化的时候，通过我们写的 path 去匹配，然后渲染对应的组件。**

那么，从这句话，我们想一下如何分步骤实现:

1.  如何监听 url 的变化 ？
2.  如何匹配 path，按什么规则 ？
3.  渲染对应的组件

了解好需要实现的关键步骤，我们来将仓库源码下载下来。

接下来我们看一下 GitHub, 它使用 lerna 管理同时管理多个包.也就是 Multirepo 概念。

> react-router 使用 lerna 来同时管理多个包. ( lerna  的好处特别多，对于依赖关系大，同类型的包推荐使用 lerna 来统一管理。)

![7570f263177343e567c0e3cc6d386660.png][]

![c3f6d5aecc930cd6bba99500169570ab.png][]

核心库是 react-router. react-router-dom 是在浏览器中使用的，react-router-native是在 rn 中使用的。

如果不理解，直接看一下源码就懂了。其实 react-router-dom 只是多了下面四个组件 BrowserRouter、 Link、NavLink、HashRouter， 其他其实都是直接引用 react-router 的。

![365638ccc9a93f14b6cadf65d4ad21cc.png][]

了解完多包的组织关系之后，我们回到前面如何实现 react-router 的 3个关键步骤，如下：

1.  如何监听 url 的变化 ？
2.  如何匹配 path ？
3.  渲染对应的组件

我们不自己来实现，直接看源码，站在巨人的肩膀上来学习????。接下来我们来看一下 react-router-dom 官方文档 的基本使用。

export default function App() {
      return (
        <BrowserRouter>
          <div>
             <Link to="/">Home</Link>
             <Link to="/about">About</Link>
             <Link to="/topics">Topics</Link>
            <Switch>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </BrowserRouter>
      );
    }

从代码中，我们可以观察到下面几点：

1.  最外层包裹了`<BrowserRouter>` ，它有什么意义？
2.  在 `<Route />`匹配的外层，包裹了`<Switch>`，作用是如果匹配了一个，则不会再继续渲染另外一个。如何实现？
3.  Route 中有 path 匹配路径，包裹的则是渲染的组件。

## 整体设计 ##

我们用一张图来理解一下整个 react-router 是怎么实现的：

接下来我们看看每一个步骤是怎么实现的。

![7a4b9a3ae1f4af704a482c8ecd2e39b7.png][]

### 一、监听 URL 的变化 ###

正常情况下，当 URL 发生变化时，浏览器会像服务端发送请求，但使用以下2种办法不会向服务端发送请求：

*  基于 hash
 *  基于 history

react-router 使用了 history 这个核心库。

##### 1. 选择方式:  history 或 hash #####

HashRouter 先是从 history 中引用 createBrowserHistory ，然后将 history 和 children 传入到 Router 。BrowseHistory同理。

![307ffb10dd4f69c65b6a7bd777bd4d85.png][]

> BrowseHistory 必须依赖服务器让 url 都映射到 index.html ，否则会 404 。

##### 2. 监听 URL 的变化，拿到对应的 history，location，match 等通过 Provider 注入到子组件中。 #####

![d88949ef94b28927a9f310c8d80ee3fe.png][]

### 二、Route 中匹配渲染组件 ###

![4643e3fbcdc0ab18b97042315632f153.png][]

这代码可以分两部分理解:

1.  是否匹配
2.  渲染组件

##### 1. 是否匹配 #####

computedMatch 是使用 Switch 包裹的子组件才有的值，Switch的作用是从上到下开始渲染，只要匹配到一个，其他的就不匹配。所以这里会先判断 computedMatch 。

![2cfe0850bc45e4230a89b698c4f5bd62.png][]

##### 匹配解析 path ，这里使用了第三方库  path-to-regexp![7b61a15608212a985dcab1712a165333.png][] #####

// Make sure you consistently `decode` segments.
    const fn = match("/user/:id", { decode: decodeURIComponent });
    
    fn("/user/123"); //=> { path: '/user/123', index: 0, params: { id: '123' } }
    fn("/invalid"); //=> false
    fn("/user/caf%C3%A9"); //=> { path: '/user/caf%C3%A9', index: 0, params: { id: 'café' } }

##### 2. 组件渲染方式 #####

从文档来看，它支持三种方式的渲染，如下：

// children 方式
    <Route exact path="/">
       <HomePage />
    </Route>
    
    // func 方式
    <Route
       path="/blog/:slug"
       render={({ match }) => {
         // Do whatever you want with the match...
         return <div />;
       }}
    />
    
    // component 方式
    <Route path="/user/:username" component={User} />

源码部分如下：

![112f74165884bcb0b8da1b5ed9714d8d.png][]

吐槽一下，作者怎么就不能好好用 if else 来写，非要写这么多变态的 ？：，请不要学习，除非你的项目只有你一个前端????。

一下子看不懂也没关系，我们来看下面的流程图。

![33fad421ba058581ec552c81dc34afe6.png][]

从上面的代码我们可以看出：

1.  Router 渲染的优先级：children >  component > render，三种方式互斥，只能使用一种。
2.  不匹配的情况下，只要 children 是函数，也会渲染
3.  component 是使用 createComponent 来创建的， 这会导致不再更新现有组件，而是直接卸载再去挂载一个新的组件。如果是使用匿名函数来传入 component ，每次 render 的时候，这个 props 都不同，会导致重新渲染挂载组件，导致性能特别差。因此，当使用匿名函数的渲染时，请使用 render 或 children 。

// 不要这么使用
    <Route path="/user/:username" component={() => <User/> } />

### 结论 ###

1.  对于依赖关系大，同类型的包使用 lerna 来统一管理。尽量抽象出共用不可变的地方，比如 react-router 中的方法。
2.  React-router 使用了**Compound components（复合组件模式）**，在这种模式中，组件将被一起使用，它们可以方便的共享一种隐式的状态，比如 Switch , 可以在这里通过 React.children 来控制包裹组件的渲染优先级，而无须使用者去控制。再比如我们经常使用的 `<select />`和 `<option>`, 可以通过 React.children 和 React.cloneElement 来劫持修改子组件，让组件使用者通过更少的 api 来触发更强大的功能。

![76b21e1ec9ed1f2794d111926b99790e.png][]

[7570f263177343e567c0e3cc6d386660.png]: /images/20221022/617de95d303648bebbf8880d8c352b6b.png
[c3f6d5aecc930cd6bba99500169570ab.png]: /images/20221022/7b9226179e78476d9fb0b7308b841180.png
[365638ccc9a93f14b6cadf65d4ad21cc.png]: /images/20221022/96fa417c846f4691bdf74290046f76b4.png
[7a4b9a3ae1f4af704a482c8ecd2e39b7.png]: /images/20221022/67c3635b946e4f9cbba61ef3ae5b1a0e.png
[307ffb10dd4f69c65b6a7bd777bd4d85.png]: /images/20221022/1cdcf3b330e644b2a14fdbcb4fc817e9.png
[d88949ef94b28927a9f310c8d80ee3fe.png]: /images/20221022/9340febab3614fcea26a1a8fd7294715.png
[4643e3fbcdc0ab18b97042315632f153.png]: /images/20221022/2cf155b846774067bd50396ed8fdbfce.png
[2cfe0850bc45e4230a89b698c4f5bd62.png]: /images/20221022/2475c576c0c04b4fb384de285ab5b2a4.png
[7b61a15608212a985dcab1712a165333.png]: /images/20221022/1c9ca76732b04320964105eb5627e581.png
[112f74165884bcb0b8da1b5ed9714d8d.png]: /images/20221022/b57a685805d54db6b9fc68f49438a5c9.png
[33fad421ba058581ec552c81dc34afe6.png]: /images/20221022/8f9398c9ea964d38a9f0b90b11f53abd.png
[76b21e1ec9ed1f2794d111926b99790e.png]: /images/20221022/cf39523a2d864334ab60d051ec1cad47.png