问题背景

今天面试的时候，被问到这么个问题。在html5的history情况下，pushstate和replacestate是无法触发pushstate的事件的，那么他是怎么做到正确的监听呢？我当时给懵住了，对哦，这怎么监听的到吗？
于是今晚在旅馆，啊，没电脑啊，只能手机打开google搜索了，好像没搜到，于是我自己去github扒源码了。啊，没带电脑看代码好吃力啊，吐槽下┐(‘～`；)┌

源码解析在此

  • 首先，你用router就得用history.push啊replace啊等来操作历史记录，依次看下面两个图高亮处你就懂了:


首先，第一副图中，push方法内部会去调用setState方法，而第二幅图setState方法中又去调用了notifyxxxxx方法，到了第三幅图，notifyxxx方法内部会遍历一个listeners数组来调用。再来到第四幅图，每次history listen方法都会调用那个append方法往第三幅图中的listeners数组中push一个listerner。

所以，原理其实很简单啊，就是一个最最最简单的observer模式啊。哎哟我去-_-||

React router内是如何做到监听history改变的的更多相关文章

  1. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  2. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  3. 利用Node的chokidar 监听文件改变的文件。

    最近维护一个项目.每次改完东西,都要上传到服务器.然后有时候就忘记一些东西,于是就想有没有可以方法能监听文件的改变.然后我再利用程序把更改的文件一键上传到服务器. 于是就找到了nodejs 的chok ...

  4. ArcEngine GroupLayer监听图层改变

    最近项目中需要用到在TOC监听图层的变化,从而针对添加的不同图层进行不同的操作.但是当TOC中添加图层组时,无法监听到图层组中添加图层的动作.也就无法获取到向图层组中添加的图层. 在开发手册中也没有找 ...

  5. react native 之 事件监听 和 回调函数

    同原生一样,react native 同样也有事件监听和回调函数这玩意. 场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面. 事件监听 事件监听类似于 ...

  6. React和Vue中，是如何监听变量变化的

    React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...

  7. oracle静态与动态监听

    在运行lsnrctl命令的status时,常会看到如下返回值: 服务“test”包含1个例程.    例程"mydata",状态 UNKOWN,包含此服务的一个处理程序... 服务 ...

  8. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  9. spring4.1.8扩展实战之三：广播与监听

    提到广播与监听,我们常常会想到RabbitMQ.Kafka等消息中间件,这些常用于分布式系统中多个应用之间,有时候应用自身内部也有广播和监听的需求(例如某个核心数据发生变化后,有些业务模块希望立即被感 ...

随机推荐

  1. go结构，结构嵌套，接口，指针的测试和结论

    package main import ( "fmt" ) //T是M1接受者,不是实现M2接受者 //*T是M1接受者,也是M2的接受者 //所以T对象不可以赋值给接口对象.*T ...

  2. STL编程：C++的忠告！

    Copy别人的,有少量修改,可以做为一下参考! C++之父Bjarne Stroustrup 写的 The C++ Programming Language (Special Edition) 中各章 ...

  3. 函数GROUP_CONCAT

    这不得不说是mysql中一个特别好用的函数,之前生写这种确实好麻烦..感谢mysql有了这么好的函数..嘿嘿 举个例子吧. s_student 表 stuinfo表 sql如下: ok,简单粗暴,就这 ...

  4. 04-手把手教你把Vim改装成一个IDE编程环境(图文)

    Linux下编程一直被诟病的一点是: 没有一个好用的IDE, 但是听说Linux牛人, 黑客之类的也都不用IDE. 但是对我等从Windows平台转移过来的Coder来说, 一个好用的IDE是何等的重 ...

  5. 深入jar包：从jar包中读取资源文件

    我们常常在代码中读取一些资源文件(比如图片,音乐,文本等等).在单独运行的时候这些简单的处理当然不会有问题.但是,如果我们把代码打成一个jar包以后,即使将资源文件一并打包,这些东西也找不出来了.看看 ...

  6. 流量监控---iftop

    一.iftop是什么? iftop是类似于top的实时流量监控工具. 官方网站:http://www.ex-parrot.com/~pdw/iftop/ 二.iftop有什么用? iftop可以用来监 ...

  7. linux系统时间与网络时间不同步

    在解决问题之前,我们首先来了解下面几个知识点: 1. date命令: #date 显示系统时间 2.hwclock命令   (即hardwareclock系统硬件时间) #hwclock 显示硬件时间 ...

  8. gradle多模块构建集成swagger

    1.首先说一下软件的版本:springboot:1.5.2:springcloud:D-SR1:swaager2:2.6.0:gradle:4.5.工程模块是分开的单独的entity,api,mapp ...

  9. webstorm + babel

    网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. 我使用的是webStorm2017.1版本. babel安装准备 使用webStorm自带的filewatcher ...

  10. [SPOJ1716] GSS3 - Can you answer these queries III

    线段树操作. 维护一个区间最大连续子段和,左最大连续子段和,右最大连续子段和即可. 最后不知道怎么搞,query的时候返回了个结构体. #include <cstdio> #include ...