react路由浅析

jackzou 发布于2019-08-22 16:12 / 2304人阅读

摘要：浏览器端使用的和集成使用时会用到中路由分类基于提供的和事件来保持和的同步。路由剖析在上面的示例中是转发的枢纽在这个中转站有很多线路通过开关可以启动列车的运行乘坐列车就可以发现新大陆。

引言

在使用react做复杂的spa开发中,开发中必不可少的就是react-router,它使用Lerna管理多个仓库, 在browser端常使用的几个如下所示

react-router 提供了路由的通用核心功能,容易搞混的就是他和react-router-dom的区别,区别就是react-router-dom中多了Link BrowserRouter 这样的 DOM 类组件,至于router和route都是一样的。

react-router-dom 浏览器端使用的router

react-router-redux 和redux集成使用时会用到

react-router中路由分类 BrowserRouter

基于html5提供的,history API(pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。大致流程就是使用history.pushState塞历史记录到浏览器中,监听window.onpopstate事件,url变化的时候render对应组件

HashRouter

HashRouter 是一种特定的 ， HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。大致流程是直接给window.location.hash赋值,监听hashchange事件,hash变化时,render对应的组件

MemoryRouter

保存"url"历史记录在内存中,在demo测试或者 React Native等非browser环境下使用

StaticRouter

    服务端渲染中会用到

路由使用

就拿 HashRouter 使用来作为示例, 其它使用形式上类似,多说一句话Hash除了今天说的路由用途之外,还可以做锚点定位。

import React, { Component } from "react";
import {BrowserRouter as Router, Route, Link,Switch,Redirect} from "react-router-dom"

class App extends Component {
  render() {
    return (
        
              
                      
                          home    //link 本质实现其实就是一个a链接
                          about 
                          list 
                      
                      
                  // 匹配到第一个匹配的路由就停止
                           //exact  表示路径要精确完全匹配
                          //写法1
                          list} /> //写法2
                        // 当都不匹配的时候,执行这个
                  
              
        
    );
  }
}

const Home = () => {
  return   home page
}
const About = () => (
    
        About
    
);
export default App;

-------------------------
//关于Router导入还有一种等价的使用方式,如下所示
import createHistory from "history/createHashHistory"
  
        里面的内容同上

说明在react-router-dom内部包含很多组件,例如route,link,switch等等,更多组件请参考这里。上面只是一个简单的实例,实现简单的路由跳转,关于说明都放在注释里了。

路由剖析

在上面的示例中,Router是转发的枢纽,在这个中转站有很多线路(Route),通过开关(Link)可以启动列车的运行,乘坐列车就可以发现新大陆(compontent) 。深入进去可以发现Router只是提供了一个上下文环境, 具体的路由功能的实现依靠传入的history属性, 这个属性的功能由history模块提供,history模块里面封装了createBrowserHistory,createHashHistory,createMemoryHistory等等。因为所有模块提供的功能接口一样所以我们以其中的createHashHistory模块作为示例分析下, 首先其提供的接口如下

 const history = {
    length: globalHistory.length,  //历史记录数量 window.history.length
    action: "POP",   //操作表示 可以为REPLACE  PUSH
    location: initialLocation, //内部封装的简版window.location
    createHref, //创建一个hash路由
    push,  
    replace,
    go, // window.history.go(n);
    goBack,  // go(-1);
    goForward, //go(1);
    block, // 地址变化,离开当前页时设置提示信息
    listen
  };

  return history;

下面选出几个比较重要的详细说明下

push

// const pushHashPath = path => (window.location.hash = path);

说明摘出的主要逻辑添加浏览器hash地址

replace 更换浏览器hash地址

const hashIndex = window.location.href.indexOf("#");

  window.location.replace(
    window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" + path
  );

说明摘出的主要逻辑更换浏览器hash地址

listen

 const listen = listener => {
    const unlisten = transitionManager.appendListener(listener); 
    checkDOMListeners(1);  

    return () => {
      checkDOMListeners(-1);
      unlisten();
    };
  };

说明在transitionManager实例中维护了一个listener数组,appendListener添加一个Listener, checkDOMListeners是绑定事件

 window.addEventListener(HashChangeEvent, handleHashChange);

每当location地址改变,HashChangeEvent触发的时候, 会取出listeners然后执行,如下所示

 transitionManager.notifyListeners(history.location, history.action);

block

  const unblock = transitionManager.setPrompt(prompt);//注册提示信息
  unblock() //执行后解除地址变化时提示信息

总结

断断续续的终于把这篇文章写好了,在此期间看了history源码,写了一些示例,尽可能将自己理解的东西以简洁直白的方式输出出来,希望大家看后能产生共鸣。

参考源码
history 4.7.2
react-router 4.3.0-rc.2

参考链接
http://reacttraining.cn/web/a...
https://juejin.im/post/5995a2...

GPU云服务器云服务器源码浅析 cdn浅析 jdbc连接mysql数据库的方法浅析 react

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94143.html

浅析React之事件系统（二）

摘要：因为阻止事件冒泡的行为只能用于合成事件中，没法阻止原生事件的冒泡。同时的创建和冒泡是在原生事件冒泡到最顶层的之后的。浅析之事件系统一上篇文章中，我们谈到了React事件系统的实现方式，和在React中使用原生事件的方法，那么这篇文章我们来继续分析下，看看React中合成事件和原生事件混用的各种情况。上一个例子在上篇文章中，我们举了个例子。为了防止大家不记得，我们来看看那个例子的代...

villainhr 2019-08-20 14:05 评论0 收藏0
浅析一波路由的hash 和 history 的区别与实现原理以及服务器刷新404的问题及解决方法

摘要：满足单页面的需求。的原理略微复杂一点，它可以通过去变动内容，不会造成页面刷新。既然浏览器不会刷新。这样的话，就可以做到刷新页面不崩的效果。如果有服务器部署基础的可以拿此类的服务器试试，我自己这边是默默地拿着配置成功了先解释下基本概念hashhash 不是那个哈希算法，就是以前url用的锚点，以前是多用来定位页面展示内容。代表符号是#之所以用hash是因为他既可以获取到，又可以不去刷新...

APICloud 2019-08-26 10:12 评论0 收藏0
浅析React之事件系统（一）

摘要：合成事件的使用方式在中不会把所有的事件处理器绑定到相应的真实的节点上，而是使用一个统一的事件监听器，把所有的事件绑定在最外层。在之前开发者需要为了优化性能需要自己来优化自己的事件处理器的代码，现在帮助你完成了这些工作。大家周末好，2016年的最后几篇文章开始写到了React的一些东西，那么最近就来一些图表君对于React的简单总结和理解，那么今天就开始第一篇，说一说React的事件系...

chemzqm 2019-08-20 14:05 评论0 收藏0
浅析 React 生命周期

摘要：在使用组件的进行组件实例化时，得到的便是其返回值。也就是说，如果其子组件的或发生改变时，只会取决于那个组件的方法的返回值。文章为本人原创，原文见本人个博浅析生命周期一浅析生命周期二 Overview 最近常有学习React相关的技术，写了几个React的小Demo，使用 React/Express 技术栈。实在太小，羞于拿出来细说。React 的确是一个值得追随的技术。但React体系...

lansheng228 2019-08-20 14:15 评论0 收藏0
koa-router 源码浅析

摘要：代码结构执行流程上面两张图主要将的整体代码结构和大概的执行流程画了出来，画的不够具体。那下面主要讲中的几处的关键代码解读一下。全局的路由参数处理的中间件组成的对象。代码结构 showImg(https://segmentfault.com/img/remote/1460000007468236?w=1425&h=1772); 执行流程 showImg(https://segmentf...

SillyMonkey 2019-08-20 12:16 评论0 收藏0