分析: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中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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