精通react之react-router4源码分析(100代码实现router功能)
1、react-router4
是一个 react 组件
通过和 location / histroy 结合,来显示页面不同URL对应显示不同的组件
其中包含了三种路由。hash / boswer 等
2、react-router基本原理
要对 history 进行解析和封装
要对 history/location 的改变进行监听
当 history/locaiton 改变触发 组件的路由检测
最后对应的渲染匹配的组件
3、实现
根据以上的分析。
我们可以开始实现基础模型代码
创建要给 Router.js 组件
this.state = {
children: null
}
// 这里是我们要渲染的子组件
// 匹配好的组件组装后显示
componentWillMount() {
let {children} = this.props
const {pathnpame} = window.location
children = this.checkRouter(children, pathname)
this.setState({
children
})
}
// 因为是模型代码
// 所以我之写初次进入的代码
// 在这里我们拦截 componentWillMount
// 根据 pathnpame ,children 实现检测和匹配
// checkRouter 匹配检测函数
function checkRouter(childrens, pathname) {
childrens.forEach((item, index) => {
const {props, type} = item
if (Object.prototype.toString.call(type) == '[object Function]' && type.name == 'Route') {
let {extra, path, children} = props
console.log(item)
if (path !== pathname && !extra) {
childrens[index].props.children= null
} else {
if (new RegExp(`^${path}`).test(pathname)) {
let {children} = props
if (Object.prototype.toString.call(children) == '[object Array]') {
childrens[index].props.children = checkRouter(children, pathname)
}
} else {
childrens[index].props.children= null
}
}
} else {
let {children} = props
if (Object.prototype.toString.call(children) == '[object Array]') {
childrens[index].props.children = checkRouter(children, pathname)
}
} })
return childrens
}
// 这里是匹配具体的规则
// 代码不多,自己理解吧
在创建一个 route.js
route.js 只要实现返回 子组件就 OK 了
4、调用
<Router>
<div>1</div>
<Text>
<div>3</div>
<Route path='/test2'>7</Route>
</Text>
<Route path='/test'>4</Route>
<Route extra path='/switch'>
<div>2</div>
<Route path='/switch/one'>5</Route>
<Route path='/switch/two'>
<div>6</div>
</Route>
</Route>
</Router>
5、完成
有什么问题可以留言回复哦!!!
精通react之react-router4源码分析(100代码实现router功能)的更多相关文章
- React事件杂记及源码分析
前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点 调用方法时需要手动绑定this React事件是一种合成事件SyntheticEvent,什么是合成事件? 事件属性 ...
- Hadoop RCFile存储格式详解(源码分析、代码示例)
RCFile RCFile全称Record Columnar File,列式记录文件,是一种类似于SequenceFile的键值对(Key/Value Pairs)数据文件. 关键词:Reco ...
- 源码分析 | 手写mybait-spring核心功能(干货好文一次学会工厂bean、类代理、bean注册的使用)
作者:小傅哥 博客:https://bugstack.cn - 汇总系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言介绍 一个知识点的学习过程基本分为:运行helloworld ...
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- jQuery 源码分析(一) 代码结构
jQuery是一个Javascript库,它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象.这一特点使得JQuery的代码无比优雅,而且有强大的选择器 ...
- 朴素贝叶斯算法源码分析及代码实战【python sklearn/spark ML】
一.简介 贝叶斯定理是关于随机事件A和事件B的条件概率的一个定理.通常在事件A发生的前提下事件B发生的概率,与在事件B发生的前提下事件A发生的概率是不一致的.然而,这两者之间有确定的关系,贝叶斯定理就 ...
- Java入门到精通——框架篇之Spring源码分析Spring两大核心类
一.Spring核心类概述. Spring里面有两个最核心的类这是Spring实现最重要的部分. 1.DefaultListableBeanFactory 这个类位于Beans项目下的org.spri ...
- jquery1.7.2的源码分析(六)基本功能
jQuery.fn.extend({ attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, va ...
- epoll源码分析(基于linux-5.1.4)
API epoll提供给用户进程的接口有如下四个,本文基于linux-5.1.4源码详细分析每个API具体做了啥工作,通过UML时序图理清内核内部的函数调用关系. int epoll_create1( ...
随机推荐
- BZOJ 1818: [Cqoi2010]内部白点 扫描线+树状数组
问题转化为求每一个极长横线段与极长纵线段的交点个数. 这个东西用扫描线+树状数组维护一下就可以了. code: #include <cstdio> #include <algorit ...
- MVC框架与增强
一.什么是MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示 ...
- 同余方程组(EXCRT)(luogu4777)
#include<cstdio> #include<algorithm> #define ll long long using namespace std; ll k; ll ...
- GoCN每日新闻(2019-10-31)
GoCN每日新闻(2019-10-31) GoCN每日新闻(2019-10-31) 1. Go语言继承的其他语言的优秀之处 https://spf13.com/presentation/the-leg ...
- linux netstat 命令简介
常用选项: -r, --route 显示路由表 -i, --interfaces 显示接口信息表-s, --statistics 显示网络协议汇总信息 -n, --numeric 不解析域名-p, - ...
- 一周 GitHub 开源项目推荐:阿里、腾讯、陌陌、bilibili……
阅读本文大概需要 2.8 分钟. 陌陌风控系统正式开源 陌陌风控系统静态规则引擎,零基础简易便捷的配置多种复杂规则,实时高效管控用户异常行为. GitHub 地址 https://github.com ...
- load average 定义(网易面试)
1. load average 定义 linux系统中的Load对当前CPU工作量的度量.简单的说是进程队列的长度. Load Average 就是一段时间 (1 分钟.5分钟.15分钟) 内平均 L ...
- [Gamma阶段]第一次Scrum Meeting
Scrum Meeting博客目录 [Gamma阶段]第一次Scrum Meeting 基本信息 名称 时间 地点 时长 第一次Scrum Meeting 19/05/27 大运村寝室6楼 60min ...
- mvel语法指南[翻译]
mvel受到了java语法的启发,但是存在一些根本性的差异,mvel旨在使其成为更有效的表达式语言.比如直接支持集合.数组和字符串匹配,正则表达式的运算操作等. mvel2.x有以下几个部分组成: ...
- RNN 的不变性
卷积神经网络的不变性 不变性的实现主要靠两点:大量数据(各种数据):网络结构(pooling)不变性的类型 1)平移不变性 卷积神经网络最初引入局部连接和空间共享,就是为了满足平移不变性. ...