React router內是如何做到監聽history改變的


問題背景

今天面試的時候,被問到這么個問題。在html5的history情況下,pushstate和replacestate是無法觸發pushstate的事件的,那么他是怎么做到正確的監聽呢?我當時給懵住了,對哦,這怎么監聽的到嗎?
於是今晚在旅館,啊,沒電腦啊,只能手機打開google搜索了,好像沒搜到,於是我自己去github扒源碼了。啊,沒帶電腦看代碼好吃力啊,吐槽下┐(‘~`;)┌

源碼解析在此

  • 首先,你用router就得用history.push啊replace啊等來操作歷史記錄,依次看下面兩個圖高亮處你就懂了:
    圖片發自簡書App

圖片發自簡書App
圖片發自簡書App

圖片發自簡書App

首先,第一副圖中,push方法內部會去調用setState方法,而第二幅圖setState方法中又去調用了notifyxxxxx方法,到了第三幅圖,notifyxxx方法內部會遍歷一個listeners數組來調用。再來到第四幅圖,每次history listen方法都會調用那個append方法往第三幅圖中的listeners數組中push一個listerner。

所以,原理其實很簡單啊,就是一個最最最簡單的observer模式啊。哎喲我去-_-||


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM