- 深入理解React Router:從原理到實踐
- 李楊韜
- 576字
- 2021-04-16 16:10:46
2.5.4 hashHistory事件處理
hashHistory監聽了瀏覽器的hashchange事件,用以獲知瀏覽器地址的變化。對于hashHistory,除了單擊瀏覽器的“前進”和“后退”按鈕時會觸發hashchange事件,hashHistory的push或replace方法由于改變了hash,同樣會觸發hashchange事件,這與browserHistory在內部處理上會有一些不同。
由于hashHistory的push或replace方法改變了hash會觸發hashchange事件,因此hashchange事件的事件響應函數需要判斷事件的觸發來源,是來源于棧指針移動,如go(1)、go(-1),還是使用push、replace方法改變hash產生的hashchange事件。若不進行判斷,則所有的導航都將在hashchange的事件響應函數中更新導航狀態的action為“POP”。在源碼實現上,在push或replace方法中會觸發一次導航狀態為“PUSH”或“REPLACE”的導航行為,且會對push或replace方法的導航路徑做一次存儲標記。如果在hashchange事件中獲得的路徑與使用push或replace方法設置的路徑一致,則表明已經通過使用push或replace方法產生了導航行為,那么在hashchange事件中將不對此次事件響應做任何處理:

在browserHistory中,browserHistory的popstate監聽函數不會特意對兩次相同導航做出處理,這意味著同樣的路徑變化都會觸發history.listen監聽的回調函數。如前后兩次路徑相同的回退操作:

而如果hashHistory在某些情況下進行兩次路徑相同的回退操作,則回調函數不會觸發兩次:

這也是模擬了原生hashchange事件的行為:

但與原生行為不同的是,進行2次路徑相同的push操作或replace操作都會觸發history.listen監聽的回調函數。但是,相同路徑push函數調用會得到對應的警告,為了與原生行為保持一致,其不會使歷史棧增加:


而replace函數調用不會得到警告,因為其不會影響歷史棧的記錄數量。
- Apache Hive Essentials
- INSTANT Weka How-to
- VSTO開發入門教程
- Essential Angular
- PhoneGap:Beginner's Guide(Third Edition)
- C語言程序設計
- Babylon.js Essentials
- Test-Driven JavaScript Development
- Visual Basic程序設計習題與上機實踐
- Cocos2d-x Game Development Blueprints
- Building Serverless Web Applications
- 軟件工程與UML案例解析(第三版)
- The Statistics and Calculus with Python Workshop
- Blender 3D Cookbook
- C++從零開始學(視頻教學版)(第2版)