react-router的原理

底层是通过history来实现的(go, back, goforward),html5的History对其进行一层包装,暴露了一些API给我们。

replaceState()和pushState()区别:pushState()是把浏览器的会话压入栈中,会使得History.length加1,而replaceState是替换当前的这条会话历史,因此不会增加History.length。
配合window.onpopstate来使用:每当活动的历史记录项发生变化时, popstate 事件都会被传递给window对象。如果当前活动的历史记录项是被 pushState 创建的,或者是由 replaceState 改变的,那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

react-router在history库的基础上,控制不同的url渲染不同的组件,实现了URL与UI的同步。
react-router 本质上,利用了 history api 的 pushState, replaceState 方法来控制路由地址,然后使用 popstate, hashchange 事件来监听变化,从而做出相应的视图变化。

function createHistory(options={}) {
  ...
  return {
    listenBefore, // 内部的hook机制,可以在location发生变化前执行某些行为,AOP的实现
    listen, // location发生改变时触发回调
    transitionTo, // 执行location的改变
    push, // 改变location
    replace,
    go,
    goBack,
    goForward,
    createKey, // 创建location的key,用于唯一标示该location,是随机生成的
    createPath,
    createHref,
    createLocation, // 创建location
  }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值