深入理解react-router@4.0 使用和源码解析


Posted in Javascript onMay 23, 2017

如果你已经是一个正在开发中的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参数,这个参数是一个对象,其中包含几个数据:

  1. isExact:刚才已经说过这个关键字,表示是为作全等匹配
  2. params:path中包含的一些额外数据
  3. path:Route组件path属性的值
  4. 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分为三类。

  1. hashHistory 老版本浏览器的history
  2. browserHistory h5的history
  3. 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

  1. exact: propType.bool
  2. path: propType.string
  3. component: propType.func
  4. 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应用.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vue的for循环使用方法
Feb 12 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
angularjs中ng-bind-html的用法总结
May 23 #Javascript
vue.js实现价格格式化的方法
May 23 #Javascript
js编写选项卡效果
May 23 #Javascript
jQuery日期范围选择器附源码下载
May 23 #jQuery
详解JavaScript数组过滤相同元素的5种方法
May 23 #Javascript
强大的 Angular 表单验证功能详细介绍
May 23 #Javascript
微信小程序 侧滑删除(左滑删除)
May 23 #Javascript
You might like
php仿ZOL分页类代码
2008/10/02 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python删除过期log文件操作实例解析
2018/01/31 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python读取yaml文件的详细教程
2020/07/21 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
办理居住证介绍信
2014/01/15 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
孔繁森观后感
2015/06/10 职场文书
赡养老人协议书范本
2015/08/06 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
angular4实现带搜索的下拉框
2022/03/25 Javascript