如果你已经是一个正在开发中的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 使用和源码解析的更多相关文章

  1. Dubbo原理和源码解析之服务引用

    一.框架设计 在官方<Dubbo 开发指南>框架设计部分,给出了引用服务时序图: 另外,在官方<Dubbo 用户指南>集群容错部分,给出了服务引用的各功能组件关系图: 本文将根 ...

  2. Go语言备忘录:net/http包的使用模式和源码解析

    本文是晚辈对net/http包的一点浅显的理解,文中如有错误的地方请前辈们指出,以免误导! 转摘本文也请注明出处:Go语言备忘录:net/http包的使用模式和源码解析,多谢!  目录: 一.http ...

  3. Dubbo原理和源码解析之标签解析

    一.Dubbo 配置方式 Dubbo 支持多种配置方式: XML 配置:基于 Spring 的 Schema 和 XML 扩展机制实现 属性配置:加载 classpath 根目录下的 dubbo.pr ...

  4. Dubbo原理和源码解析之“微内核+插件”机制

    github新增仓库 "dubbo-read"(点此查看),集合所有<Dubbo原理和源码解析>系列文章,后续将继续补充该系列,同时将针对Dubbo所做的功能扩展也进行 ...

  5. Dubbo原理和源码解析之服务暴露

    github新增仓库 "dubbo-read"(点此查看),集合所有<Dubbo原理和源码解析>系列文章,后续将继续补充该系列,同时将针对Dubbo所做的功能扩展也进行 ...

  6. Go语言备忘录(3):net/http包的使用模式和源码解析

    本文是晚辈对net/http包的一点浅显的理解,文中如有错误的地方请前辈们指出,以免误导! 转摘本文也请注明出处:Go语言备忘录(3):net/http包的使用模式和源码解析,多谢!  目录: 一.h ...

  7. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  8. Spring源码解析02:Spring IOC容器之XmlBeanFactory启动流程分析和源码解析

    一. 前言 Spring容器主要分为两类BeanFactory和ApplicationContext,后者是基于前者的功能扩展,也就是一个基础容器和一个高级容器的区别.本篇就以BeanFactory基 ...

  9. Spring源码解析 | 第二篇:Spring IOC容器之XmlBeanFactory启动流程分析和源码解析

    一. 前言 Spring容器主要分为两类BeanFactory和ApplicationContext,后者是基于前者的功能扩展,也就是一个基础容器和一个高级容器的区别.本篇就以BeanFactory基 ...

随机推荐

  1. 34. Find First and Last Position of Element in Sorted Array

    1. 原始题目 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在 ...

  2. 第三周 数据分析之概要 Pandas库入门

    Pandas库介绍: Pandas库引用:Pandas是Python第三方库,提供高性能易用数据类型和分析工具 import pandas as pd Pandas基于NumPy实现,常与NumPy和 ...

  3. Lua中字符串库中的几个重点函数

    [前言] 在<Lua中的一些库(1)>中也说到了,要对string库的模式匹配进行单独的讲解.对于字符串的处理,对于任何语言的学习来说,都是一个难点,而且也是一个必会的知识点.给你一个字符 ...

  4. 【easy】112.path sum 113.-----------------

    求是否有从根到叶的路径,节点和等于某个值. /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tree ...

  5. JVM--01

    ---恢复内容开始--- jdk  jre  jvm 的关系 java7的结构图 java8 jvm内存溢出 jdk /bin 目录下的jconsole java发展历史 oak:用在嵌入式设备上 相 ...

  6. 【原创】Linux基础之查看linux发行版以及内核版本

    redhat查看发行版 # cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 查看内核版本 # uname -aLinux $h ...

  7. An overview of network penetration testing

    1. an SQLi vulnerability will allow you  to do the  following query the database using select statem ...

  8. ReSharper反编译C#类库

    经常会在使用C#类中的某个函数时想了解其中具体的代码,可是F12转到定义后只能看到函数简单的声明, 看不到方法体中的代码,这挺让人沮丧的.. 如下: F12进入后显示的是元数据, Equals函数只能 ...

  9. PHP利用模板消息无限制向用户推送消息

    <?php //获取微信access_token function getaccess_token(){ //appid与appsecret改成你自己的 $appid = '自己的appid'; ...

  10. MyString

    [摘自C++程序设计语言] MyString.h #include <cstring> #include <iostream> #include <stdexcept&g ...