React-Router 源码分析1

2024-04-25 23:32:56

1、单页面应用的路由基本原理

demo1

router1.html
复制代码

以 hash 形式为例。

1、init 监听浏览器 url hash 更新事件。

2、route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新。

3、refresh 执行当前url对应的回调函数，更新页面

当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。

History API 可以实现 path 形式

demo2

router2.html
复制代码

react-router 是基于 history 模块提供的 api 进行开发的。

这个例子来简单模拟下 react-router 的模式。

Router 通过对 history 进行包装开发，针对 historyModule 的机制对 Router 也起到了作用，即historyModule.updateLocation() 将触发 Router.listen 中的回调函数

2、react-router 部分源码探索与实践

react-router 中 Router 部分源码

Router 在这里对 history 进行了一个监听，正常调用了 history 以后，这边就会接收到这个更新，回调函数将在 url 更新时触发，并且触发一次setState，触发页面刷新

Route 部分源码

props.match为true 就会渲染出组件

mathPath 部分源码

dva-router——react-router-dom/ react-router-redux

应用

ConnectedRouter 为 react-router-redux 内的对象 ConnectedRouter 的标签

dva 的 router.js

dva 的 package.json

react-router-dom

Router / BrowserRouter / HashRouter / MemoryRouter / StaticRouter

BrowserRouter

HashRouter

MemoryRouter

<MemoryRouter> 组件在内存中保存“URL”信息，不会修改浏览器的地址栏，往往用于React Native 等非浏览器环境。

StaticRouter

<StaticRouter> 组件不修改路由，这在服务器端渲染时很有用。

Route

Redirect

Switch

Link

react-router-redux

react-router-redux 是 React-Router 与 Redux 的深度集成，它将路由完全纳入 store 中进行管理，使 store 成为了 URL（或者说是 history）的数据来源，也使我们能够通过 dispatch action 的方式来修改 URL

ConnectedRouter

dispatch 就相当于调用了 history 的 push replace 等方法。当发起了一个dispatch并且正常调用了history以后，Router 就会接收到这个更新，并且触发一次setState 刷新页面

React-Router 源码分析1相关推荐

React Native 源码分析（三）——Native View创建流程
1.React Native 源码分析(一)-- 启动流程 2.React Native 源码分析(二)-- 通信机制 3.React Native 源码分析(三)-- Native View创建流程 ...
react中context到底是如何传递的-源码分析
react中使用context 基本要求就是父组件中声明Parent.prototype.getChildContext 父组件中声明Parent.childContextType 子组件声明 Ch ...
react源码分析-setState分析
前言是否有过这样的疑问: setState做了什么? setState是如何触发ui变化的? isWorking 如果此时isWorking为true,react将不会立即执行更新操作,而是把更新操 ...
Dubbo 源码分析 - 集群容错之 Router
1. 简介上一篇文章分析了集群容错的第一部分 – 服务目录 Directory.服务目录在刷新 Invoker 列表的过程中,会通过 Router 进行服务路由.上一篇文章关于服务路由相关逻辑没有细 ...
推荐一个 React 技术揭秘的项目，自顶向下的 React 源码分析
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ just-react 这本书的宗旨是打造一本严谨.易懂的 React 源码分析教程. 为了达到这个目标,在行文上,本书会遵循: 不预 ...
【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
[vue-rouer源码]系列文章 [vue-router源码]一.router.install解析 [vue-router源码]二.createWebHistory.createWebHashHis ...
窥探React - 源码分析
所谓知其然还要知其所以然. 本文将分析 React 15-stable的部分源码, 包括组件初始渲染的过程和组件更新的过程.在这之前, 假设读者已经: 对React有一定了解知道React elem ...
微前端框架之 qiankun 从入门到源码分析
当学习成为了习惯,知识也就变成了常识.感谢各位的点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
【Golang源码分析】Go Web常用程序包gorilla/mux的使用与源码简析
目录[阅读时间:约10分钟] 一.概述二.对比: gorilla/mux与net/http DefaultServeMux 三.简单使用四.源码简析 1.NewRouter函数 2.HandleF ...
Django源码分析10：makemigrations命令概述
django源码分析本文环境python3.5.2,django1.10.x系列 django源码分析-makemigrations命令概述 Django项目中的数据库管理命令就是通过makemig ...

最新文章

热门文章