首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一场升级 React-Router 带来的‘血案’

本次案例覆盖的知识点如下: 1 项目中安装依赖包的规范。 2 context 的消费订阅。 3 react-router v5.2.0 版本变化。 4 本地和线上事故排查。...二 问题背景 接下来介绍一下具体问题,最近有同学(化名小明)在开发中遇到了一个问题,就是使用 React-Router 带来的线上事故。...线上和本地不一致,那么这种情况下,第一个应该想到的就是,是不是线上的依赖包和本地的有区别。那么验证也很简单,就是升级本地的所有包,因为线上部署的包,一般都是 install 一个的新的包。...npm 版本安装机制 ^ 在package.json中代表什么意思,原来在 package.json 中 ^ 会匹配最新的大版本依赖包。...useHistory 本质上调用了 useContext ,使用了整个路由库中 Context 的 history 对象。

1.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端面试题合集

    UDP和TCP有什么区别TCP协议在传送数据段的时候要给段标号;UDP协议不TCP协议可靠;UDP协议不可靠TCP协议是面向连接;UDP协议采用无连接TCP协议负载较高,采用虚电路;UDP采用无连接TCP...DNS完整的查询过程DNS服务器解析域名的过程:首先会在浏览器的缓存中查找对应的IP地址,如果查找到直接返回,若找不到继续下一步将请求发送给本地DNS服务器,在本地域名服务器缓存中查询,如果查找到,就直接将查找结果返回...IP 地址,首先会在浏览器的缓存中查找是否有该域名的缓存,如果不存在就将请求发送到本地的 DNS 服务器中,本地DNS服务器会判断是否存在该域名的缓存,如果不存在,则向根域名服务器发送一个请求,根域名服务器返回负责...函数的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中,因为闭包函数保留了这个变量对象的引用,所以这个变量对象不会被回收。...因此最后返回的不管是不是函数,也都不能说明没有产生闭包闭包的表现形式返回一个函数在定时器、事件监听、Ajax 请求、Web Workers 或者任何异步中,只要使用了回调函数,实际上就是在使用闭包。

    80020

    【前端面试分享】-2019“银十”面试题记录

    前言 由于不可抗逆之因素,在金九银十的后半段开始求职。 面试的确可以驱动学习,驱动知识的归类整理。 以此文记录面试过程中遇到的题目,仅供分享,不喜勿喷。 js js 事件循环 简述js事件循环?...访问一个对象的属性时,先在基本属性中查找,如果没有,在沿着隐式原型_proto_这条链向上找 (因为obj....); c(); 在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。...这里是典型的发布订阅模式,在这个模式下:数据是发布者(Observer),依赖对象是订阅者(Watcher),他们需要一个中间人来传递,那就是订阅器(Dep)。...因为订阅者Watcher是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理。

    11610

    前端面试知识点

    闭包 一个可以访问另一个函数中的变量的函数。当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行就产生了闭包。...js 本地对象,内置对象和宿主对象 本地对象包括如下内容:Object、Function、String、Array、Boolean、Number 内置对象:Math 宿主对象:BOM/DOM对象 http...export {XXX} 上述导出方式可以在同一个文件内使用多次 还有 AMD规范 和CMD规范 什么是观察者模式 也称:发布订阅模式。...在MVP中,View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部。...diff算法 angular 模块 组件 服务 管道 什么是依赖注入 如何使用路由 参数快照 参数订阅 响应式编程 angular中的模板式表单和响应式表单 如何做表单验证 angular-cli的使用方式

    1.6K10

    脚本化HTTP 取得响应 指定请求

    下面是旧的ajax方式 使用iframe完成一次ajax,脚本先把要发送给web服务器的信息编码到url中,服务器在动态的创建一个html文档,将其内容返回给web,在iframe中显示,这种方式受道同源的限制...发布/订阅事件系统 一种设计模式,有两种,一种是观察者模式,一种是发布订阅模式, 即,消息推送使用的是发布/订阅事件系统 观察者模式 意图:定义对象间的一对多的依赖关系,当一个对象状态发生改变时,所有依赖它的对象都得到通知...ajax 在本地写js的时候,必须搭建一个服务器其AJAX才能工作 原因:因为文件的协议为file而本地的请求的协议为http,由于同源策略的影响,导致无法使用http协议的文件,故本地无法直接使用ajax...,用于在本地搭建服务器。...发送请求 由于get请求不包括主体,则直接send方法即可完成一个包的发送, 由于跨域限制导致不能读取 在http://1.197.156.53/编写js如下 // 编写请求头GET并完成发送 var

    1.4K40

    JS常用的几种设计模式

    面试常常问到设计模式,设计模式在实际业务中即使有用到,但是依然感受不到它的存在,往往在框架中会有更多体现,比如vue2源码,内部还是有很多设计思想,比如观察者模式,模版模式等,我们在业务上一些通用的工具类也会用到单例...,在大量的条件判断也会考虑策略者模式,这两种用得比较多。...】 是一种行为模式,主要用于不同对象之间的交互信息 发布对象:重要事情发生时,会通知订阅者 订阅对象:监听发布对象的通知,并做出相应的反应 观察者主要分为两类:推送模式和拉动模式 推送模式是由发布者负责将消息发送给订阅者...但过度的设计模式也会带来一定的阅读负担,凡事不可追求两全其美,只需要适可而止。...,通过形参输出对应的对象 装饰器模式,主要是扩展对象的多个功能能力 观察者模式也是发布订阅模式,主要有发布对象与订阅对象,订阅者监听发布对象的通知,做出响应,发布对象是有重要通知,统一通知所有订阅者 另外看到一个利用闭包实现一个函数的

    78720

    2. 「vue@2.6.11 源码分析」数据驱动视图(响应式)

    ,在getter中建立双向关系。...这里关联在vue中有两种不同的实现(一个是对象属性,一个是闭包),分别针对不同的场景,后面会看到。...,这是为了给value新增和删除属性做准备的(value是普通对象,其每个属性也会关联一个dep对象,在defineReactive方法中通过闭包持有),后面会细说 给value新增一个不可枚举的属性作为标识...`val`),如果当前有观察者,则进行双向关系的保存:观察者收集依赖和依赖收集订阅者(就是观察者),这部分能力在`watcher.addDep(dep)`方法中。...在v2.6.11实现中,Watcher持有两个依赖数组(deps, newDeps),每次重新建立完依赖后的依赖关系可能发生变更(新增了依赖关系,已有的依赖可能不再存在),因此源码中在收集完依赖后会调用

    53730

    javascript设计模式六:发布-订阅模式(观察者模式)

    发布-订阅模式也叫观察者模式,是js开发中应用广泛的一种模式。...下面将列举一个通用发布订阅模式的示例,应用到闭包、this、apply/call、自执行函数等概念,起码达到熟悉的程度,才有可能把发布-订阅模式真正吃透并能灵活运用到实际场景中去。...) 27 // }) 28 29 //forEach用es6函数写法时,由于es6的箭头函数不暴露arguments对象,所以可以在箭头函数中使用arguments,因为它指向的是其外层函数中的...怎么理解面向对象中的对象呢?对象是过程和数据的结合,对象以方法的形式包含了过程,在方法中可以用this访问到所处对象环境中的数据,以供方法中的过程使用。 怎么理解闭包呢?...闭包在过程中以上下文环境的形式包含了数据,即闭包始终保持对上下文环境中数据的引用。 发现共同点了么? 对象过程与闭包过程都能始终保持对所处上下文环境数据的引用。

    69820

    WebSocket 介绍以及配合 STOMP 的使用

    套接字 这个部分,说的是 Socket 连接建立起来之后,双方维护的一个对象,用来发送和接受数据包。...一个 Socket 连接建立,对应的是连接两端对应的一对套接字对象,其维护的信息为:连接使用的协议,本地主机的 IP 地址,本地进程的协议端口,远地主机的 IP 地址,远地进程的协议端口。...在一开始建立连接的过程中,希望建立连接的客户端会向服务端发送一个 HTTP 请求,询问服务器是不是支持 WebSocket,并且告诉服务端,我使用 WebSocket 请求,希望服务端进行相应的响应。.../ 将订阅对象减少一个(错误对象) clients.splice(clients.length - 1, 1); return; }); // 在每次对应的 roomid 频道收到消息时,转发给所有的订阅者...另外,在完成这部分内容的探索学习过程中,还顺便学习了一下 npm 包发布的相关内容。感觉学习新东西确实是总能给人带来益处,大家加油!

    3.1K20

    JavaScript嗅探执行神器-sniffer.js,你值得拥有!

    判断Wall是否存在window中。  2. Wall存在,则继续判断message是否在Wall中。  3. message存在,则继续判断setName是否在message中  4....如果中间的任意一个检测不通过,则方法不可执行。 五、实现缓存 缓存使用闭包实现的。...以队列的性质,存储在list中 ;(function(FUN, undefined){ 'use strict' var list = []; // 存储订阅的需要调用的方法 // 执行方法...嗅探结果为不可执行,则根据传入的配置值subscribe,决定是否缓存到队列list中。  需要缓存,则拼接好队列单个项,push进list。...首先要告知trigger方法,需要从队列list中拿出哪个方法执行。  2. 在执行方法之前,需要再次嗅探这个方法是否已经存在。存在了,才可以执行。否则,则可以认为方法已经不存在,可以从缓存中移除。

    1.2K30

    看完就懂的Hybrid框架设计方案

    调用:安卓注入的对象挂载在全局,直接调用接口。...,不同于场景二的订阅模式,订阅结果需要维护在 Native,所以这里需要有一次 JS -> Native 调用。...03、离线包方案 对于 H5 来说,大量时间消耗在网络请求,资源下载阶段,如果 Native 在加载 H5 时,直接从本地读取资源,再配合缓存数据,就可以大大提升 H5 的首屏速度。...不同框架构建产物格式会有些许的差别,这种差异对 App 来说是不可接受的,我们需要约定一种统一的离线包格式,只要符合这个约定的 zip 包,都可以是离线包。...在 iOS 中可以使用 WKURLSchemeHandler 进行拦截,Native 拦截到地址后,需要解析出文件名(前端 js 、css 等资源通常带了 md5 值,可以唯一标识),然后根据文件名去本地查找

    2.1K31

    HarmonyOS 开发实践 —— 事件通信能力解决方案

    CommonEvent 为应用程序提供订阅、发布、退订公共事件的能力。可分为系统公共事件和自定义公共事件。系统公共事件指,系统内部定义的公共事件,如应用包安装、设备关机等。...##方案描述场景一:同 Ability 通信通过 Eventhub 订阅事件打开自定义弹窗:效果图方案弹窗功能依赖UI的执行上下文,不可在UI上下文不明确的地方使用,在一些异步回调或非UI界面中调用该接口...核心代码private uiAbilityContext = getContext() as common.UIAbilityContext;1.订阅方:创建自定义弹窗中显示的组件内容buildText...,只有包名为bundleName的订阅者才能收到该公共事件。}...:let subscriber: CommonEventManager.CommonEventSubscriber; //用于保存创建成功的订阅者对象,后续使用其完成订阅及退订的动作//订阅者信息let

    24020

    Hooks概览(译)

    在函数组件中调用useState来向它添加一些本地state。React将在重新渲染之间保留此状态。useState返回一对值:当前 state 值和一个用于更新这个值的函数。...在上面的例子中,这个初始值是0,因为计数器从0开始。请注意,与this.state不同的是,此处的state 不必是对象——尽管它支持对象类型。这个初始化state的参数仅在第一次渲染被使用。...这些规则最初可能看起来是一种限制或令人困惑,但它们对于使Hooks运行良好必不可少。 详细解释 你可以在专属页上了解有关规范的更多信息:Hook规范。...在本页前面,我们介绍了一个调用useState和useEffect Hooks的FriendStatus组件来订阅朋友的在线状态。我们希望在另一个组件中复用此订阅逻辑。...); // ... }  useReducer允许你使用reducer管理复杂组件的本地state: function Todos() { const [todos, dispatch] = useReducer

    1.8K90

    落魄前端,整理给自己的前端知识体系复习大纲(下篇)

    1.原型链继承 本质是重写了对象。 缺点: 1)对象实例共享所有继承的属性和方法 2)不能传递参数 2.构造函数继承 在子类构造函数的内部调用超类型构造函数。...在解析过程中有两个阶段:词法分析和语法分析,词法分析阶段把字符串形式的代码转换为令牌(tokens)流,令牌类似于AST中节点;而语法分析阶段则会把一个令牌流转换成 AST的形式,同时这个阶段会把令牌中的信息转换成...例如前端JS 中的事件冒泡,一层一层往上传递。 优点: 1、降低耦合度。它将请求的发送者和接收者解耦。 2、简化了对象。使得对象不需要知道链的结构。 3、增强给对象指派职责的灵活性。...7.DNS解析 浏览器缓存 —>> 本地hosts文件 —>> 本地DNS解析器 —>>本地DNS服务器 —>> 其他域名服务器请求。...第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(seq=k),即SYN+ACK包,此时服务器进入SYN_RECV状态。

    58410

    web面试题及答案_前端html面试题

    如 packaeg.json 中某个包的版本是 ^1.1.0,npm 就会去仓库中获取符合 1.x.x 形式的最新版本。 获取模块实体。...上一步会获取到模块的压缩包地址(resolved 字段),npm 会用此地址检查本地缓存,缓存中有就直接拿,如果没有则从仓库下载。 查找该模块依赖,如果有依赖则回到第1步,如果没有则停止。...还有一种特殊情况是,在子函数执行的过程中,父函数已经return了,这种情况下,JS引擎会将父函数的上下文从执行栈中移除,与此同时,JS引擎会为还在执行的子函数上下文创建一个闭包,这个闭包里保存了父函数内声明的变量及其赋值...1、XSS是向页面注入js去运行,然后在js函数体中做他想做的事情。 CSRF是利用网站漏洞,自动执行接口。用户需要登陆网站。 2、XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。...1、工厂模式: 主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。

    62920

    虾皮、OPPO、富途等十几家公司面经总结

    每个文件就是一个模块;每个文件里面的代码会用默认写在一个闭包函数里面AMD规范则是非同步加载模块,允许指定回调函数,AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。...缓存 :主要有 cdn、浏览器缓存、本地缓存以及应用离线包 预加载 :资源预拉取(prefetch)则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。...这个主体对象在状态变化时,会通知所有的观察者对象。 发布订阅者模式的概念 发布-订阅模式,消息的发送方,叫做发布者(publishers),消息不会直接发送给特定的接收者,叫做订阅者。...(应用场景:HTP,HTTP,邮件) UDP:面向非连接、传输不可靠、用于传输少量数据(数据包模式)、速度快 ,可能丢包(应用场景:即时通讯) 是否连接 面向连接 面向非连接 传输可靠性...头部压缩:减少包的大小跟数量 HTTP/1.1 中的管道( pipeline)传输中如果有一个请求阻塞了,那么队列后请求也统统被阻塞住了 HTTP/2 多请求复用一个TCP连接,一旦发生丢包,就会阻塞住所有的

    90030

    记录一套新鲜的前端笔试题

    考察点:闭包:第一段代码没有传递 i 值,第二段代码有传递 i 值。...然后看到主线程的同步任务console.log(6),随即打印; // 这个时候控制台打印了2,6;(可以在控制台中看到已返回“undefined”) 然后执行宏任务,console.log(1); 继续执行宏任务队列中的...力荐: 一次弄懂Event Loop Eventloop不可怕,可怕的是遇上Promise 第十题解答 除了压缩代码、合并文件外,列举出你所知道的优化网站首屏显示速度的方法?...答: 使用 CDN 加速静态资源; webapck打包,减少资源载入,按需加载; 避免 JS 执行阻塞渲染; 图片使用懒加载,视频或音频禁止自动播放,用图标代替图片; 充分利用本地缓存; 第十一题解答...因为订阅者Watcher是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理。

    18410
    领券