首頁 web前端 js教程 分析:React-Router路由跳轉時觸發兩次render的情況

分析:React-Router路由跳轉時觸發兩次render的情況

Jul 22, 2017 pm 01:57 PM
react-router render 兩次

問題:React-Router路由跳轉時,render觸發兩次,導致頁面重複渲染。

原因:專案中使用的react-router ^3.x.x。 react-router路由跳轉時,this.props.location.action的值會有兩種狀態。這兩種狀態都會觸發render。故頁面渲染兩次。

     1、點擊Link時,this.props.location.action=PUSH,2、當瀏覽器前進後退時,this.props.location.action=POP。

     所以點擊了Link時,狀態先是PUSH,之後瀏覽器發生前進後退,狀態變成POP。

解決方案:在路由層,使用react週期函數 shouldComponentUpdate(生命週期不熟悉的同學請另查資料) 進行 this.props.location.action值得判斷。根據項目實際需要判斷值是PUSH,或是POP。

     本人選擇的是POP,因為專案中有些需求要使用到 window.location.hash='xxxxxxxx',這種情況PUSH是觸發不到的,所以路由跳轉會失敗。

1 shouldComponentUpdate() {2         // POP 浏览器前进后退, PUSH 点击Link3         return this.props.location.action === "POP"4 }
登入後複製

備註:facebook官方說此情況是 react-router 的BUG,已經在 ^4.x.x中修復了。

     以上內容均是本人在實際專案開發中所遇所得,每個人所遇BUG不同,請大神輕噴。謝謝! 

以上是分析:React-Router路由跳轉時觸發兩次render的情況的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue3怎麼透過render函數實現選單下拉框 vue3怎麼透過render函數實現選單下拉框 May 10, 2023 pm 04:28 PM

技術方案先寫一個下拉框組件首先,我們先寫一個元件,用來展示下拉框內容。元件名稱起為:Select.vue福利商城Saas平台活動自訂渲染元件我們要將這個元件渲染在網頁上,操作應該是這樣的:當滑鼠移到產品服務時,將下拉方塊元件作為一個元件實例渲染在頁面的合適位置。 vue3中,渲染一個Vonde,核心邏輯如下:import{createVNode,h,render,VNode}from'vue'importcomponentfrom"./component.

事件冒泡為何會觸發兩次? 事件冒泡為何會觸發兩次? Feb 22, 2024 am 09:06 AM

事件冒泡為何會觸發兩次?事件冒泡(EventBubbling)是指在DOM中,當一個元素觸發了某個事件(例如點擊事件),該事件會從該元素開始向上冒泡至父元素,直到冒泡到最頂層的文檔對象為止。事件冒泡是DOM事件模型的一部分,它允許開發者將事件監聽綁定到父元素,從而在子元素觸發事件時,可以透過冒泡機制來捕獲並處理事件。然而,有時開發者會遇到事件冒泡觸發兩次的

Mpeppe(MPEPE)幣:加密貨幣市場的新競爭者,吸引來自 Render(RNDR)和網路電腦(ICP)的投資者 Mpeppe(MPEPE)幣:加密貨幣市場的新競爭者,吸引來自 Render(RNDR)和網路電腦(ICP)的投資者 Sep 03, 2024 pm 02:03 PM

加密貨幣的世界總是在不斷變化,新的代幣吸引了尋找下一個重大機會的經驗豐富的投資者的注意。

為何事件冒泡機制會觸發兩次? 為何事件冒泡機制會觸發兩次? Feb 25, 2024 am 09:24 AM

為什麼事件冒泡會連續發生兩次?事件冒泡是web開發中重要的概念,它指的是當一個事件在嵌套的HTML元素中觸發時,事件會從最內層的元素開始一直冒泡到最外層的元素。這個過程有時會引起困惑,其中一個常見問題就是事件冒泡會連續發生兩次。為了更好的理解為什麼事件冒泡會連續發生兩次,我們先來看一段程式碼範例:

render是渲染的意思嗎 render是渲染的意思嗎 Feb 02, 2023 pm 02:52 PM

render是渲染的意思,是一種繪圖術語;渲染是CG的最後一道工序,也是最終使圖像符合的3D場景的階段;渲染英文為Render,也有人會把它稱為著色,但一般把Shade稱為著色,把Render稱為渲染。

HMD Slate Tab 5G 洩漏為中階平板電腦,搭載 Snapdragon 7s Gen 2、10.6 吋顯示器和 Lumia 設計 HMD Slate Tab 5G 洩漏為中階平板電腦,搭載 Snapdragon 7s Gen 2、10.6 吋顯示器和 Lumia 設計 Jun 18, 2024 pm 05:46 PM

HMD Global 將於 7 月 10 日推出 Skyline,推出諾基亞 Lumia 920 風格的中端智慧型手機。

Render幣值得長期持有嗎? Render幣值得投資嗎? Render幣值得長期持有嗎? Render幣值得投資嗎? Mar 06, 2024 am 08:31 AM

Render幣:值得長期持有的投資機會Render幣是基於以太坊區塊鏈的加密貨幣,專為支付去中心化渲染網路Render上的渲染服務而設計。其目標是應對傳統渲染解決方案的高成本和低效率,為藝術家和創作者提供經濟實惠且便捷的渲染選擇。 Render幣的優勢去中心化:Render幣基於以太坊區塊鏈,具有去中心化的特性,避免了中心化渲染服務商的單點故障和高昂費用。高效率:Render幣利用分散式渲染技術,將渲染任務分配給全球各地的閒置GPU,大幅提升渲染效率。低成本:Render幣透過消除中間商,降低了。

react-router怎麼實現前進後退 react-router怎麼實現前進後退 Dec 20, 2022 pm 02:17 PM

react-router實作前進後退的方法:1、透過「goback(){this.props.history.goBack()}」實作路由前進;2、透過「go(){this.props.history.go(-1 ) }”實作路由回退。

See all articles