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

如果视图在react-router-dom上的路由中,我如何取消重新渲染视图

在react-router-dom中,如果要取消重新渲染视图,可以使用React的React.memo高阶组件或者shouldComponentUpdate生命周期方法来实现。

  1. 使用React.memo高阶组件:
    • React.memo是一个用于优化函数组件性能的高阶组件。它会对组件的props进行浅比较,如果props没有发生变化,则不重新渲染组件。
    • 在路由组件中,可以使用React.memo包裹需要取消重新渲染的视图组件,例如:
    • 在路由组件中,可以使用React.memo包裹需要取消重新渲染的视图组件,例如:
    • 这样,当路由切换时,如果MyComponent的props没有发生变化,则不会重新渲染视图。
  • 使用shouldComponentUpdate生命周期方法:
    • 如果视图组件是类组件,可以在组件中重写shouldComponentUpdate方法,手动控制是否重新渲染组件。
    • 在路由组件中,可以通过继承React.Component来创建自定义的路由组件,并重写shouldComponentUpdate方法,例如:
    • 在路由组件中,可以通过继承React.Component来创建自定义的路由组件,并重写shouldComponentUpdate方法,例如:
    • shouldComponentUpdate方法中,可以根据需要的条件判断是否重新渲染组件。如果条件满足,返回true表示重新渲染,否则返回false表示取消重新渲染。

以上是在react-router-dom上取消重新渲染视图的两种方法。这样可以提高应用的性能,避免不必要的渲染。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 进阶 - React Router

,也需要容器组件通过路由更新,来渲染视图 History 核心基础,增加了 Router ,Switch ,Route 等组件来处理视图渲染 React-Router-DOM React-Router...基础,增加了一些 UI 层面的拓展比如 Link ,NavLink React-Router 基础,增加了两种模式根部路由 BrowserRouter ,HashRouter # history...context 改变,会使消费 context 组件更新,触发路由改变时,重新渲染匹配组件 props.history 是通过 BrowserRouter 或 HashRouter 创建 history...来获取上一级传递来路由进行路由匹配,如果匹配,渲染子代路由 并利用 context 逐层传递特点,将自己路由信息,向子代路由传递下去,这样也就能轻松实现了嵌套路由 四种 Route 使用方式 function...通过 Switch 包裹后,那么页面上只会展示一个正确匹配路由 Redirect Redirect 可以路由不匹配情况下跳转指定某一由,适合路由不匹配或权限路由情况 注意 Switch 包裹

1.9K21

React Router v4 完全指北

React Router 事实是React官方标准路由库。当你一个多视图React应用中来回切换,你需要一个路由来管理那些URL。...开场白 React 是一个很流行库,用于客户端渲染创建单页应用(SPAs)。 一个SPA会有很多视图(也可以称为页面),不像传统多页应用,视图之间跳转不应该导致整个页面被重新加载。...相反,我们希望视图就在当前页面里渲染。那些习惯于多页应用最终用户,期望一个SPA中应该包含以下特性: 应用中每个视图都应该有对应唯一URL用来区分视图。...当前路径改变时,视图重新渲染,给你一种跳转感觉。当前路径又是如何改变呢?history对象有 history.push()和 history.replace()这些方法来实现。...然而,使用锚链接会导致浏览器刷新,这不是我们想要。所以,我们可以使用 来跳转至具体URL,并且视图重新渲染不会导致浏览器刷新。 我们已经介绍了创建一个基本路由需要所有东西。

2.8K20
  • React Router v4教程:为你 React 应用创建路由

    博文中,将引导你搞懂 React 中路由概念。...将单页应用限制为单一视图并不适用于 Facebook、Instagram 等流行社交媒体网站,这些网站现在使用 React 呈现多个视图。我们需要继续前进,学习如何在单页面应用中显示多个视图。...用户看上去是多个页面之间进行切换,但实际,根据我们需要实现了多个视图,每个单独组件被重新渲染。 React 是如何实现这一目标的? 这就是'History'概念出现在图片中地方。... React 中,路由查看每个组件历史记录,当历史记录发生任何变化时,组件会重新渲染 Router v4 之前,我们必须手动设置 History 值。...Switch: 虽然我们可以一个 标签中封装几个路由。如果我们希望一次只渲染一个路径组件,可以使用 标签。它按顺序检查每个路径匹配并在找到第一个匹配后停止。

    2K20

    ReactRouter实现

    描述 React Router是建立history对象之上,简而言之一个history对象知道如何去监听浏览器地址栏变化,并解析这个URL转化为location对象,然后router使用它匹配到路由...ReactRouter作用就是通过改变URL,重新请求页面的情况下,更新页面视图,从而动态加载与销毁组件,简单说就是,虽然地址栏地址改变了,但是并不是一个全新页面,而是之前页面某些部分进行了修改...Memory History Memory History不会在地址栏被操作或读取,这就可以解释如何实现服务器渲染,同时其也非常适合测试和其他渲染环境例如React Native,和另外两种History...,如果匹配则渲染,否则不渲染,是否匹配依据就是computeMatch这个函数,在下文会有分析,这里只需要知道匹配失败则match为null,如果匹配成功则将match结果作为props一部分,...Router中listen,它会监听路由变化,然后通过context更新props和nextContext让下层Route去重新匹配,完成需要渲染部分更新。

    1.4K10

    React路由

    前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面) 前端路由是一套映射规则,React中,是 URL路径 与 组件 对应关系 使用React路由简单来说,就是配置 路径和组件(配对)...Route, Link } from 'react-router-dom' Link与NavLink Link组件最终会渲染成a标签,用于指定路由导航 to属性,将来会渲染成a标签href属性 Link...默认active exact: 精确匹配,表示必须精确匹配类名才生效 Route path 说明 默认情况下,/能够匹配任意/开始路径 如果 path 路径匹配上了,那么就可以对应组件就会被...render 如果 path 没有匹配上,那么会 render null 如果没有指定 path,那么一定会被渲染 exact 说明, exact 表示精确匹配某个路径 一般来说,如果路径配置了.../, 都需要配置 exact 属性 Switch与404 通常,我们会把Route包裹在一个Switch组件中 Switch组件中,不管有多少个路由规则匹配到了,都只会渲染第一个匹配组件

    2K20

    React路由

    大家好,又见面了,是你们朋友全栈君。...为了有效使用单个页面来管理原来多页面的功能,前端路由应运而生 前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面),前端路由是一套映射规则,Reat中是URL路径与组件对应关系,使用..."; hash模式下#后边路径不会发给服务器,不会被包括 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面,处理相对路径方面的一些问题时,使用HashRouter可以解决...我们创建组件是没有history对象Route组件中渲染了自己创建组件,然后通过prop传了history进去。...如果想要开启replace模式,需要在Link组件添加replace属性 ​ 嵌套路由 注册子路由时要写上父路由path值 路由匹配是按照注册路由顺序进行

    2.6K10

    React面试八股文(第一期)

    但是已经使用redux来管理和存储全局数据基础,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能框架呢?...依赖于 DOM 节点初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求好地方。这个方法比较适合添加订阅地方,如果添加了订阅,请记得卸载时候取消订阅。...不要在这里调用 setState,因为组件不会重新渲染。对 Redux 理解,主要解决什么问题React是视图层框架。Redux是一个用来管理数据状态和UI状态JavaScript应用工具。...如果这还不够糟糕,考虑一些来自前端开发领域新需求,如更新调优、服务端渲染、路由跳转前请求数据等。state 管理大项目中相当复杂。...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部值就必须每个都要编写事件处理函数

    3.1K30

    前端react面试题指北

    ,react可以相对准确知道哪些位置发生了改变以及该如何改变,这保证按需更新,而不是宣布重新渲染 展示组件(Presentational component)和容器组件(Container component...DOM 快么(Virtual DOM优势不在于单次操作,而是大量、频繁数据更新下,能够对视图 进行合理、高效更新。)...浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变时候render是不会执行如果需要重新渲染那么就需要重新开辟空间引用数据。...,使得框架更加简易; (2)共同思想 单—数据源 变化可以预测 本质∶ redux与vuex都是对mvvm思想服务,将数据从视图中抽离一种方案。...这样 React 更新 DOM 时候就不需要考虑如何去处理附着 DOM 事件监听器,最终达到优化性能目的 mobox 和 redux 有什么区别?

    2.5K30

    iOS界面渲染流程分析

    ~ 最近面试中,发现一道面试题,其考点是:围绕iOS App中一个视图从添加到完全渲染,在这个过程中,iOS系统都做了什么?...出处 一个UIImageView添加到视图上以后,内部是如何渲染到手机上,请简述其流程? 一个表内有很多cell,每个cell上有很多个视图,如何解决卡顿问题?...---- IPC内部通信(进程间通信) 研究这个问题过程中,有想过去看一下源码,试着去理解视图完全渲染之前,IPC是如何调度,可惜苹果并没有开源绘制过程中代码。...; ---- 视图加载 那么了解iOS视图渲染流程以后,再来看一下第二题: 一个UIImageView添加到视图上以后,内部是如何渲染到手机上,请简述其流程?...做法是尽量快速、提前判断当前绘制任务是否已经被取消绘制每一行文本前,都会调用 isCancelled() 来进行判断,保证被取消任务能及时退出,不至于影响后续操作。

    2.6K20

    04-React路由5版本(高亮, 嵌套, 参数传递... )

    index.html 引用样式时候写%PUBLIC_URL% 使用绝对路径 使用HashRouter[基本不用] 模糊匹配与精准匹配 默认采用模糊匹配 路由中包含传递值,即可展示 还是可以展示..., 也可以使用querystring方法, 当热这个库React18之后已经被弃用了, 本来也想试一下,但是发现不行 调用直接报错 应该是已经没有依赖了, 可以自己安装一下, 就不安装了...history对象调用方法实现编程式路由跳转 这个案例是用params参数方式,如果是search方式就自己改一下问号, 如果是state方式, 就把对象放入参数第二个参数,第一个是URL, 第二个就是...state 路由组件与一般组件 # 直接使用定义组件 就是一般组件 渲染时props中不会有默认路由组件三大对象 # 通过路由跳转组件 就是路由组件 渲染时props中会携带...BrowserRouter没有任何影响, 应为state保存在History对象中 HashRouter刷新会导致路由state参数丢失 扩展: HashRouter可以用于解决一些劲错误相关问题

    1.1K20

    React Router 进阶技巧

    本文介绍工程中经常用到 react-router 技巧: ?️ 如何在 TypeScript 中使用? ?️exact和strict区别? ?️ 如何封装路由配置组件? ?️...如何响应路由变化? VueJS 技术栈中,vue-router 是提供路由响应钩子函数,例如:beforeEach、afterEach等等。...但是 React 中,react-router 并不提供相关钩子函数。那么如果有顶部导航栏,不同页面切换时,高亮不同标签,那么应该怎么实现响应路由变化呢?...首先即使是路由, React 中,它也是一个组件对象。因此,如果要更新试图,必须触发组件 render。而触发组件关键在于,props 发生改变。...处理思路是:render()返回视图中,变量变化依赖 props 属性值。

    2.5K20

    React Router源码浅析

    了解React Router实现原理 如何监听有变化以及渲染对应组件 一直认为,会用框架和用好框架是有很大区别的,当用框架到一定程度时候,就需要看看框架对应生态中那些不可获取库,这样能加深不同框架中同样功能优秀实现方案...---- 阅读须知 源码阅读基于react-router和react-router-dom 5.2.1版本 React Router如何监听路由变化?...Route都将会重新渲染判断是否命中路由来进行重新渲染。...组件的话,那么只会渲染首先命中当前urlRoute组件,具体是如何实现呢?...那,我们使用时候并没有传递进去当前history实例呀,实际还记得之前看Route组件时候,return时候,又包裹了一层Context吗,其实实际就是给Link这类型标签方便获取到history

    1.1K20

    React Router V6详解

    事实,react-router并不是一个库,塔包含3个库:react-router、react-router-dom和react-router-native,分别用来适配浏览器环境和手机原生环境。...之所以取消正则路由,是因为如下几点原因: 正则路由为V6版本路由排序带来很多问题,比如,如果定义一个正则优先级; 正则路由占据了React Router近1/3体积; 正则路由能表达,V6版本都支持...改变路径url时不触发页面刷新 当url发生改变时会重新渲染url对应界面 所以,我们谈React Router原理,其实就是分析订阅和操作history堆栈、URL 与router匹配以及渲染router...4.1 基本概念 正式讲解之前,我们先看一下路由中一些概念: URL:地址栏中URL; Location:由React Router基于浏览器内置window.location对象封装而成特定对象...history object,这些React Router底层实现了,React Router提供监听history stack变化,最终URL变化时更新其状态,并重新渲染

    7.9K50

    React Router 邦邦两拳🥊 🥊

    ---- 这是参与11月更文挑战第16天,活动详情查看:2021最后一次更文挑战」 简介 React Router 是一个基于 React 之上强大路由库,它可以让你向应用中快速地添加视图和数据流...path2'); 导航栏 传统 不使用react或Vue这种脚手架框架之前。之前写过boostarp导航栏,左侧导航栏是要在每个文件中都写一次。然后选中那页tab状态样式是选中样式。...找到后,它会渲染该并忽略所有其他路由。如果没有匹配到,则和不渲染任何内容。 exact ,path匹配是开头,而不是整个。...它基本就是元素React 版本,可以接收Router状态。...简而言之,一个 history 知道如何去监听浏览器地址栏变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应组件。

    3.4K20

    《SpringMVC从入门到放肆》二、SpringMVC执行流程及默认配置

    一篇博文我们做了一个hello world程序,并且已经成功跑起来了。这一篇我们来深入了解一下SpringMVC执行流程以及一些其它配置。...6、View:视图 流程: 当用户浏览器中提交请求后首先进入我们中央调度器,由中央调度器依次调用上图中2、3、6、7步然后再返回到客户端。...7步骤:中央调度器进行视图渲染渲染后并返回给用户。...如果没有进行配置HandlerMapping、HandlerAdapter、ViewResolver则按该配置默认方式进行加载与执行。...三、配置视图解析器 来看我们MyController,里面有 mv.setViewName("/WEB-INF/jsp/welcome.jsp"); 如果我们系统中Controller有很多,每一个都这样来写

    62590

    2022 最新 Vue 3.0 面试题

    这里适合在更新之前访问现有的 DOM,比如手动移除已添加事件监听器,该钩子服务器端渲染期间不被调用,因为只有初 次渲染会在服务端进行 6、updated 由于数据更改导致虚拟 DOM 重新渲染和打补丁...(必会) 1、前言:开发 Vue 项目的时候,大部分组件是没必要多次渲染,所以 Vue 提供了一 个内置组件 keep-alive 来缓存组件内部状态,避免重新渲染开发 Vue 项目的时候,大部分...组件是没必要多次渲染,所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态,避 免重新渲染 2、生命周期函数:在被 keep-alive 包含组件/路由中,会多出两个生命周期钩...57、Vue 如何去除 URL 中#(必会) vue-router 默认使用 hash 模式,所以路由加载时候,项目中 URL 会自带 “#”, 如果不想使用 “#”, 可以使用 vue-router...67、Vue 中如何实现一个虚拟 DOM?说说你思路(高薪 常问) 首先要构建一个 Vnode 类,DOM 元素所有属性 Vnode 类实例化出来对象都 存在对应属性。

    14210

    React-Router 5.0 制作导航栏+页面参数传递

    React中,常用有两个包可以实现这个需求,那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。...和BrowserRouter HashRouter特点 URL中采用#号来作为当前视图地址,改变#号后参数,页面并不会重载 BrowserRouter特点 和正常浏览网易url类似 页面并不会重载...React-Router-Dom 导航实现 管他三七二十一 先安装再说: yarn add react-router-dom 使用React-Router-DomAPI之前 需要使用BrowserRouter...,匹配到一个Route就不会往下匹配了 Route组件: 如果Route没用指定path 只要匹配不到path都会渲染这个组件 可以用这个增加用户体验 实现一个友好404页面 exact属性 严格匹配路由...A链接 一种封装 但是使用场景不太一样 如果选择导航栏时候使用NavLink非常合适 因为他直接提供activeStyle等属性 直接聚焦在这个组件时style会应用给组件

    3.4K10
    领券