react-router@4.0 使用和源码解析
如果你已经是一个正在开发中的react应用,想要引入更好的管理路由功能。那么,react-router是你最好的选择~
react-router版本现今已经到4.0.0了,而上一个稳定版本还是2.8.1。相信我,如果你的项目中已经在使用react-router之前的版本,那一定要慎重的更新,因为新的版本是一次非常大的改动,如果你要更新,工作量并不小。
这篇文章不讨论版本的变化,只是讨论一下React-router4.0的用法和源码。
源码在这里:https://github.com/ReactTraining/react-router
1.准备
只需要在你的react app中引入一个包
yarn add react-router-dom@next
注:react-router-dom是对react-router的作了一些小升级的库,代码基于react-router
2.使用
我们直接上例子:
import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom' const Basic = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page1">Page1</Link></li>
<li><Link to="/page2">Page2</Link></li>
</ul> <hr/> <Route exact path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</div>
</Router>
)
跟之前的版本一样,Router这个组件还是一个容器,但是它的角色变了,4.0的Router下面可以放任意标签了,这意味着使用方式的转变,它更像redux中的provider了。通过上面的例子相信你也可以看到具体的变化。而真正的路由通过Route来定义。Link标签目前看来也没什么变化,依然可以理解为a标签,点击会改变浏览器Url的hash值,通过Route标签来捕获这个url并返回component属性中定义的组件,你可能注意到在为"/"写的路由中有一个exact关键字,这个关键字是将"/"做唯一匹配,否则"/"和"/xxx"都会匹配到path为"/"的路由,制定exact后,"/page1"就不会再匹配到"/"了。如果你不懂,动手试一下~
通过Route路由的组件,可以拿到一个match参数,这个参数是一个对象,其中包含几个数据:
- isExact:刚才已经说过这个关键字,表示是为作全等匹配
- params:path中包含的一些额外数据
- path:Route组件path属性的值
- url:实际url的hash值
我们来实现一下刚才的Page2组件:
const Page2 = ({ match }) => (
<div>
<h2>Page2</h2>
<ul>
<li>
<Link to={`${match.url}/branch1`}>
branch1
</Link>
</li>
<li>
<Link to={`${match.url}/branch2`}>
branch2
</Link>
</li>
<li>
<Link to={`${match.url}/branch3`}>
branch3
</Link>
</li>
</ul> <Route path={`${match.url}/:branchId`} component={Branch} />
<Route exact path={match.url} render={() => (
<h3>Default Information</h3>
)} />
</div>
) const Branch = ({ match }) => {
console.log(match);
return (
<div>
<h3>{match.params.branchId}</h3>
</div>
)
}
很简单,动手试一试。需要注意的就只有Route的path中冒号":"后的部分相当于通配符,而匹配到的url将会把匹配的部分作为match.param中的属性传递给组件,属性名就是冒号后的字符串。
3.Router标签
细心的朋友肯定注意到了上面的例子中我import的Router是BrowserRouter,这是什么东西呢?如果你用过老版本的react-router,你一定知道history。history是用来兼容不同浏览器或者环境下的历史记录管理的,当我跳转或者点击浏览器的后退按钮时,history就必须记录这些变化,而之前的react-router将history分为三类。
- hashHistory 老版本浏览器的history
- browserHistory h5的history
- memoryHistory node环境下的history,存储在memory中
4.0之前版本的react-router针对三者分别实现了createHashHistory、createBrowserHistory和create MemoryHistory三个方法来创建三种情况下的history,这里就不讨论他们不同的处理方式了,好奇的可以去了解一下~
到了4.0版本,在react-router-dom中直接将这三种history作了内置,于是我们看到了BrowserRouter、HashRouter、MemoryRouter这三种Router,当然,你依然可以使用React-router中的Router,然后自己通过createHistory来创建history来传入。
react-router的history库依然使用的是 https://github.com/ReactTraining/history
4.Route标签
在例子中你可能注意到了Route的几个prop
- exact: propType.bool
- path: propType.string
- component: propType.func
- render: propType.func
他们都不是必填项,注意,如果path没有赋值,那么此Route就是默认渲染的。
Route的作用就是当url和Route中path属性的值匹配时,就渲染component中的组件或者render中的内容。
当然,Route其实还有几个属性,比如location,strict,chilren 希望你们自己去了解一下。
说到这,那么Route的内部是怎样实现这个机制的呢?不难猜测肯定是用一个匹配的方法来实现的,那么Route是怎么知道url更新了然后进行重新匹配并渲染的呢?
整理一下思路,在一个web
应用中,改变url无非是2种方式,一种是利用超链接进行跳转,另一种是使用浏览器的前进和回退功能。前者的在触发Link的跳转事件之后触发,而后者呢?Route利用的是我们上面说到过的history的listen方法来监听url的变化。为了防止引入新的库,Route的创作者选择了使用html5中的popState事件,只要点击了浏览器的前进或者后退按钮,这个事件就会触发,我们来看一下Route的代码:
class Route extends Component {
static propTypes: {
path: PropTypes.string,
exact: PropTypes.bool,
component: PropTypes.func,
render: PropTypes.func,
} componentWillMount() {
addEventListener("popstate", this.handlePop)
} componentWillUnmount() {
removeEventListener("popstate", this.handlePop)
} handlePop = () => {
this.forceUpdate()
} render() {
const {
path,
exact,
component,
render,
} = this.props //location是一个全局变量
const match = matchPath(location.pathname, { path, exact }) return (
//有趣的是从这里我们可以看出各属性渲染的优先级,component第一
component ? (
match ? React.createElement(component, props) : null
) : render ? ( // render prop is next, only called if there's a match
match ? render(props) : null
) : children ? ( // children come last, always called
typeof children === 'function' ? (
children(props)
) : !Array.isArray(children) || children.length ? ( // Preact defaults to empty children array
React.Children.only(children)
) : (
null
)
) : (
null
)
)
}
}
这里我只贴出了关键代码,如果你使用过React,相信你能看懂,Route在组件将要Mount的时候添加popState事件的监听,每当popState事件触发,就使用forceUpdate强制刷新,从而基于当前的location.pathname进行一次匹配,再根据结果渲染。
PS:现在最新的代码中,Route源码其实是通过componentWillReceiveProps中setState来实现重新渲染的,match属性是作为Route组件的state存在的.
那么这个关键的matchPath方法是怎么实现的呢?
Route引入了一个外部library:path-to-regexp。这个pathToRegexp方法用于返回一个满足要求的正则表达式,举个例子:
let keys = [],keys2=[]
let re = pathToRegexp('/foo/:bar', keys)
//re = /^\/foo\/([^\/]+?)\/?$/i keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }] let re2 = pathToRegexp('/foo/bar', keys2)
//re2 = /^\/foo\/bar(?:\/(?=$))?$/i keys2 = []
关于它的详细信息你可以看这里:https://github.com/pillarjs/path-to-regexp
值得一提的是matchPath方法中对匹配结果作了缓存,如果是已经匹配过的字符串,就不用再进行一次pathToRegexp了。
随后的代码就清晰了:
const match = re.exec(pathname) if (!match)
return null const [ url, ...values ] = match
const isExact = pathname === url //如果exact为true,需要pathname===url
if (exact && !isExact)
return null return {
path,
url: path === '/' && url === '' ? '/' : url,
isExact,
params: keys.reduce((memo, key, index) => {
memo[key.name] = values[index]
return memo
}, {})
}
5.Link
还记得上面说到的改变url的两种方式吗,我们来说说另一种,Link,看一下它的参数:
static propTypes = {
onClick: PropTypes.func,
target: PropTypes.string,
replace: PropTypes.bool,
to: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
]).isRequired
}
onClick就不说了,target属性就是a标签的target属性,to相当于href。
而replace的意思跳转的链接是否覆盖history中当前的url,若为true,新的url将会覆盖history中的当前值,而不是向其中添加一个新的。
handleClick = (event) => {
if (this.props.onClick)
this.props.onClick(event) if (
!event.defaultPrevented && // 是否阻止了默认事件
event.button === 0 && // 确定是鼠标左键点击
!this.props.target && // 避免打开新窗口的情况
!isModifiedEvent(event) // 无视特殊的key值,是否同时按下了ctrl、shift、alt、meta
) {
event.preventDefault() const { history } = this.context.router
const { replace, to } = this.props if (replace) {
history.replace(to)
} else {
history.push(to)
}
}
}
需要注意的是,history.push和history.replace使用的是pushState方法和replaceState方法。
6.Redirect
我想单独再多说一下Redirect组件,源码很有意思:
class Redirect extends React.Component {
//...省略一部分代码 isStatic() {
return this.context.router && this.context.router.staticContext
} componentWillMount() {
if (this.isStatic())
this.perform()
} componentDidMount() {
if (!this.isStatic())
this.perform()
} perform() {
const { history } = this.context.router
const { push, to } = this.props if (push) {
history.push(to)
} else {
history.replace(to)
}
} render() {
return null
}
}
很容易注意到这个组件并没有UI,render方法return了一个null。很容易产生这样一个疑问,既然没有UI为什么react-router的创造者依然选择将Redirect写成一个组件呢?
我想我们可以从作者口中的"Just Components API"中窥得原因吧。
希望这篇文章可以帮助你更好的创建你的React应用.
文章来自 http://www.jianshu.com/p/27ee7df4ccc1
react-router@4.0 使用和源码解析的更多相关文章
- Dubbo原理和源码解析之服务引用
一.框架设计 在官方<Dubbo 开发指南>框架设计部分,给出了引用服务时序图: 另外,在官方<Dubbo 用户指南>集群容错部分,给出了服务引用的各功能组件关系图: 本文将根 ...
- Go语言备忘录:net/http包的使用模式和源码解析
本文是晚辈对net/http包的一点浅显的理解,文中如有错误的地方请前辈们指出,以免误导! 转摘本文也请注明出处:Go语言备忘录:net/http包的使用模式和源码解析,多谢! 目录: 一.http ...
- Dubbo原理和源码解析之标签解析
一.Dubbo 配置方式 Dubbo 支持多种配置方式: XML 配置:基于 Spring 的 Schema 和 XML 扩展机制实现 属性配置:加载 classpath 根目录下的 dubbo.pr ...
- Dubbo原理和源码解析之“微内核+插件”机制
github新增仓库 "dubbo-read"(点此查看),集合所有<Dubbo原理和源码解析>系列文章,后续将继续补充该系列,同时将针对Dubbo所做的功能扩展也进行 ...
- Dubbo原理和源码解析之服务暴露
github新增仓库 "dubbo-read"(点此查看),集合所有<Dubbo原理和源码解析>系列文章,后续将继续补充该系列,同时将针对Dubbo所做的功能扩展也进行 ...
- Go语言备忘录(3):net/http包的使用模式和源码解析
本文是晚辈对net/http包的一点浅显的理解,文中如有错误的地方请前辈们指出,以免误导! 转摘本文也请注明出处:Go语言备忘录(3):net/http包的使用模式和源码解析,多谢! 目录: 一.h ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- Spring源码解析02:Spring IOC容器之XmlBeanFactory启动流程分析和源码解析
一. 前言 Spring容器主要分为两类BeanFactory和ApplicationContext,后者是基于前者的功能扩展,也就是一个基础容器和一个高级容器的区别.本篇就以BeanFactory基 ...
- Spring源码解析 | 第二篇:Spring IOC容器之XmlBeanFactory启动流程分析和源码解析
一. 前言 Spring容器主要分为两类BeanFactory和ApplicationContext,后者是基于前者的功能扩展,也就是一个基础容器和一个高级容器的区别.本篇就以BeanFactory基 ...
随机推荐
- 非root用户安装java版本
有时候,我们所用的用户并不是root用户,升级java版本,其实是一个非常简单的过程,具体过程如下: 将下载好的tar包进行解压,然后进行配置文件,在命令行敲入 vi ~/.bashrc,在这个文件 ...
- 解决 CentOS7 安装完成后ifconfig命令不能用
今天用VMWare安装了CentOS7,选择了最小安装包模式,安装完毕之后想查看一下本机的ip地址,发现报错 # ifconfig -bash: ifconfig: command not found ...
- JAVA 数组元素的反转
package Code411;/*数组元素的反转本来[1,2,3,4]反转后[4,3,2,1]1.对称位置的元素交换2.对称位子需要两个索引3.int temp =a:a=b;b=temp;4.什么 ...
- gerrit和git
1.git Git是什么? Git是目前世界上最先进的分布式版本控制系统. SVN是集中式版本控制系统. Git与svn比较 相同:能记录文件的所有更改记录.这样是为了大量更改后,可以有记录回到过去, ...
- Java面试题复习笔记(Web方向)
1.Http中get和post请求的区别? 共同点:都是Http请求方式,用户可以通过不同的请求方式完成对资源(Url)的操作.具体来讲就是get一般用于获取/查询资源信息,post用于更新资源信息. ...
- python2 安装 MySQL-python
yum -y install mysql-devel libxml2 libxml2-dev libxslt* zlib gcc openssl yum install gcc libffi-deve ...
- [原创]基于Zynq Linux环境搭建(四)
此篇编译根文件系统 下载busybox和dropbear, [#73#13:04:52 FPGADeveloper@ubuntu ~/Zybo_Demo/XilinxFS]$wget --no-che ...
- SpringBoot配置分析、获取到SpringBoot配置文件信息以及几种获取配置文件信息的方式
Spring入门篇:https://www.cnblogs.com/biehongli/p/10170241.html SpringBoot的默认的配置文件application.properties ...
- Ethereum(1)—— 基本介绍
1 环境安装 安装Ethereum 协议的Go语言的最新实现. git clone https://github.com/ethereum/go-ethereum.git make all cd bu ...
- mac php7.0~7.2 memcache安装
参考 https://www.uedbox.com/post/8924/ https://blog.csdn.net/bjbs_270/article/details/45642905 1. zlib ...