「源码解析 」这一次彻底弄懂react-router路由原理 下

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 核心介绍 react-router 路由实现

一 核心api

1 Router-接收location变化,派发更新流

Router 作用是把 history location 等路由信息 传递下去

Router

/* Router 作用是把 history location 等路由信息 传递下去  */
class Router extends React.Component {
   
   
  static computeRootMatch(pathname) {
   
   
    return {
   
    path: '/', url: '/', params: {
   
   }, isExact: pathname === '/' };
  }
  constructor(props) {
   
   
    super(props);
    this.state = {
   
   
      location: props.history.location
    };
    //记录pending位置
    //如果存在任何<Redirect>,则在构造函数中进行更改
    //在初始渲染时。如果有,它们将在
    //在子组件身上激活,我们可能会
    //在安装<Router>之前获取一个新位置。
    this._isMounted = false;
    this._pendingLocation = null;
    /* 此时的history,是history创建的history对象 */
    if (!props.staticContext) {
   
   
      /* 这里判断 componentDidMount 和 history.listen 执行顺序 然后把 location复制 ,防止组件重新渲染 */
      this.unlisten = props.history.listen(location => {
   
   
        /* 创建监听者 */
        if (this._isMounted) {
   
   

          this.setState({
   
    location });
        } else {
   
   
          this._pendingLocation = location;
        }
      });
    }
  }
  componentDidMount() {
   
   
    this._isMounted = true;
    if (this._pendingLocation) {
   
   
      this.setState({
   
    location: this._pendingLocation });
    }
  }
  componentWillUnmount() {
   
   
    /* 解除监听 */
    if (this.unlisten) this.unlisten();
  }
  render() {
   
   
    return (
      /*  这里可以理解 react.createContext 创建一个 context上下文 ,保存router基本信息。children */
      <RouterContext.Provider
          children={
   
   this.props.children || null}
          value={
   
   {
   
   
          history: this.props.history,
          location: this.state.location,
          match: Router.computeRootMatch(this.state.location.pathname),
          staticContext: this.props.staticContext
        }}
      />
    );
  }
}

总结:

初始化绑定listen, 路由变化,通知改变location,改变组件。 react的history路由状态是保存在React.Content上下文之间, 状态更新。

一个项目应该有一个根Router , 来产生切换路由组件之前的更新作用。
如果存在多个Router会造成,会造成切换路由,页面不更新的情况。

2 Switch-匹配正确的唯一的路由

根据router更新流,来渲染当前组件。

/* switch组件 */
class Switch extends React.Component {
   
   
  render() {
   
   
    return (
      <RouterContext.Consumer>
        {
   
   /* 含有 history location 对象的 context */}
        {
   
   context => {
   
   
          invariant(context, 'You should not use <Switch> outside a <Router>');
          const location = this.props.location || context.location;
          let element, match;
          //我们使用React.Children.forEach而不是React.Children.toArray().find()
          //这里是因为toArray向所有子元素添加了键,我们不希望
          //为呈现相同的两个<Route>s触发卸载/重新装载
          //组件位于不同的URL。
          //这里只需然第一个 含有 match === null 的组件
          React.Children.forEach(this.props.children, child => {
   
   
            if (match == null && React.isValidElement(child)) {
   
   
              element = child;
              // 子组件 也就是 获取 Route中的 path 或者 rediect 的 from
              const path = child.props.path || child.props.from;
              match = path
                ? matchPath(location.pathname, {
   
    ...child.props, path })
                : context.match;
            }
          });
          return match
            ? React.cloneElement(element, {
   
    location, computedMatch: match })
            : null;
        }}
      </RouterContext.Consumer>
    );
  }
}

找到与当前path,匹配的组件进行渲染。 通过pathname和组件的path进行匹配。找到符合path的router组件。

matchPath

function matchPath(pathname, options = {
   
   }) {
   
   
  if (typeof options === "string" || Array.isArray(options)) {
   
   
    options = {
   
    path: options };
  }

  const {
   
    path, exact = false, strict = false, sensitive = false } = options;

  const paths = [].concat(path);

  return paths.reduce((matched, path) => {
   
   
    if (!path && path !== "") return null;
    if (matched) return matched;

    const {
   
    regexp, keys } = compilePath(path, {
   
   
      end: exact,
      strict,
      sensitive
    });
    const match = regexp.exec(pathname);
    /* 匹配不成功,返回null */
    if (!match) return null;

    const [url, ...values] = match;
    const isExact = pathname === url;

    if (exact && !isExact) return null;

    return {
   
   
      path, // the path used to match
      url: path === "/" && url === "" ? "/" : url, // the matched portion of the URL
      isExact, // whether or not we matched exactly
      params: keys.reduce((memo, key, index) => {
   
   
        memo[key.name] = values[index];
        return memo;
      }, {
   
   })
    };
  }, null);
}

匹配符合的路由。

3 Route-组件页面承载容器

/**
 * The public API for matching a single path and rendering.
 */
class Route extends React.Component {
   
   
  render() {
   
   
    return (
      <RouterContext.Consumer>
        {
   
   context => {
   
   
          /* router / route 会给予警告警告 */
          invariant(context, "You should not use <Route> outside a <Router>");
          // computedMatch 为 经过 swich处理后的 path
          const location = this.props.location || context.location;
          const match = this.props.computedMatch 
            ? this.props.computedMatch // <Switch> already computed the match for us
            : this.props.path
            ? matchPath(location.pathname, this.props)
            : context.match;
          const props = {
   
    ...context, location, match };
          let {
   
    children, component, render } = this.props;

          if (Array.isArray(children) && children.length === 0) {
   
   
            children = null;
          }

          return (
            <RouterContext.Provider value={
   
   props}>
              {
   
   props.match
                ? children
                  ? typeof children === "function"
                    ? __DEV__
                      ? evalChildrenDev(children, props, this.props.path)
                      : children(props)
                    : children
                  : component
                  ? React.createElement(component, props)
                  : render
                  ? render(props)
                  : null
                : typeof children === "function"
                ? __DEV__
                  ? evalChildrenDev(children, props, this.props.path)
                  : children(props)
                : null}
            </RouterContext.Provider>
          );
        }}
      </RouterContext.Consumer>
    );
  }
}

匹配path,渲染组件。作为路由组件的容器,可以根据将实际的组件渲染出来。通过RouterContext.Consume 取出当前上一级的location,match等信息。作为prop传递给页面组件。使得我们可以在页面组件中的props中获取location ,match等信息。

4 Redirect-没有符合的路由,那么重定向

重定向组件, 如果来路由匹配上,会重定向对应的路由。

function Redirect({
   
    computedMatch, to, push = false }) {
   
   
  return (
    <RouterContext.Consumer>
      {
   
   context => {
   
   
        const {
   
    history, staticContext } = context;
        /* method就是路由跳转方法。 */
        const method = push ? history.push : history.replace;
        /* 找到符合match的location ,格式化location */
        const location = createLocation(
          computedMatch
            ? typeof to === 'string'
              ? generatePath(to, computedMatch.params)
              : {
   
   
                  ...to,
                  pathname: generatePath(to.pathname, computedMatch.params)
                }
            : to
        )
        /* 初始化的时候进行路由跳转,当初始化的时候,mounted执行push方法,当组件更新的时候,如果location不相等。同样会执行history方法重定向 */
        return (
          <Lifecycle
              onMount={
   
   () => {
   
   
              method(location);
            }}
              onUpdate={
   
   (self, prevProps) => {
   
   
              const prevLocation = createLocation(prevProps.to);
              if (
                !locationsAreEqual(prevLocation, {
   
   
                  ...location,
                  key: prevLocation.key
                })
              ) {
   
   
                method(location);
              } 
            }}
              to={
   
   to}
          />
        );
      }}
    </RouterContext.Consumer>
  );
}

初始化的时候进行路由跳转,当初始化的时候,mounted执行push方法,当组件更新的时候,如果location不相等。同样会执行history方法重定向。

二 总结 + 流程分析

总结

history提供了核心api,如监听路由,更改路由的方法,已经保存路由状态state。

react-router提供路由渲染组件,路由唯一性匹配组件,重定向组件等功能组件。

流程分析

当地址栏改变url,组件的更新渲染都经历了什么?😊😊😊
拿history模式做参考。当url改变,首先触发histoy,调用事件监听popstate事件, 触发回调函数handlePopState,触发history下面的setstate方法,产生新的location对象,然后通知Router组件更新location并通过context上下文传递,switch通过传递的更新流,匹配出符合的Route组件渲染,最后有Route组件取出context内容,传递给渲染页面,渲染更新。

当我们调用history.push方法,切换路由,组件的更新渲染又都经历了什么呢?

我们还是拿history模式作为参考,当我们调用history.push方法,首先调用history的push方法,通过history.pushState来改变当前url,接下来触发history下面的setState方法,接下来的步骤就和上面一模一样了,这里就不一一说了。

我们用一幅图来表示各个路由组件之间的关系。

希望读过此篇文章的朋友,能够明白react-router的整个流程,代码逻辑不是很难理解。整个流程我给大家分析了一遍,希望同学们能主动看一波源码,把整个流程搞明白。纸上得来终觉浅,绝知此事要躬行。

写在最后,谢谢大家鼓励与支持🌹🌹🌹,喜欢的可以给笔者点赞关注,公众号:前端Sharing

相关文章
|
2月前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。创建型模式分为5种:单例模式、工厂方法模式抽象工厂式、原型模式、建造者模式。
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
2月前
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
|
2月前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式,前者采用继承机制来组织接口和类,后者釆用组合或聚合来组合对象。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象结构型模式比类结构型模式具有更大的灵活性。 结构型模式分为以下 7 种: • 代理模式 • 适配器模式 • 装饰者模式 • 桥接模式 • 外观模式 • 组合模式 • 享元模式
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
21天前
|
自然语言处理 数据处理 索引
mindspeed-llm源码解析(一)preprocess_data
mindspeed-llm是昇腾模型套件代码仓,原来叫"modelLink"。这篇文章带大家阅读一下数据处理脚本preprocess_data.py(基于1.0.0分支),数据处理是模型训练的第一步,经常会用到。
40 0
|
2月前
|
安全 搜索推荐 数据挖掘
陪玩系统源码开发流程解析,成品陪玩系统源码的优点
我们自主开发的多客陪玩系统源码,整合了市面上主流陪玩APP功能,支持二次开发。该系统适用于线上游戏陪玩、语音视频聊天、心理咨询等场景,提供用户注册管理、陪玩者资料库、预约匹配、实时通讯、支付结算、安全隐私保护、客户服务及数据分析等功能,打造综合性社交平台。随着互联网技术发展,陪玩系统正成为游戏爱好者的新宠,改变游戏体验并带来新的商业模式。
|
3月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
111 9
|
4月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
4月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
259 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
67 1

推荐镜像

更多