深入理解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 = []
关于它的详细信息你可以看这里:
值得一提的是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应用.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 禁用笔记本键盘的详细方法(图文教程)
推荐阅读
-
深入理解react-router@4.0 使用和源码解析
-
浅谈react-router@4.0 使用方法和源码分析
-
Android MeasureSpec的理解和源码的解析
-
浅谈react-router@4.0 使用方法和源码分析
-
深入解析Vue.js中v-bind v-model的使用和区别
-
深入解析Vue.js中v-bind v-model的使用和区别
-
Laravel源码解析之路由的使用和示例详解
-
深入理解react-router@4.0 使用和源码解析
-
spring5 源码深度解析----- 事务的回滚和提交(100%理解事务)
-
Spring MVC源码(三) ----- @RequestBody和@ResponseBody原理解析