---
「下栽の地止：
路由守衛是指在路由跳轉前、跳轉後做一些動作所觸發的鉤子函式，在後台管理系統中涉及到許可權控制相關的邏輯時經常會看見，在實現路由跳轉真實動作前會先校驗該登入使用者是否有許可權，或者是token是否過期才會通過，反之就會執行其他操作，例如返回首頁或登入頁。
那麼如何通過react-router來實現專案中的路由守衛呢？一共有兩種方案：
通過公共高階元件攔截；
在專案根目錄判斷攔截；
先說第一點，我們可以封裝乙個高階元件，將所有渲染真實頁面的路由元件傳入該高階元件，在高階元件中判斷許可權邏輯，在react-router中可以使用route元件的render屬性或函式式元件來實現路由守衛。
使用render屬性時，可以傳入乙個函式，根據需要渲染不同的元件或頁面，在這個函式中實現路由守衛的具體邏輯，例如檢查使用者是否登入，根據使用者角色判斷是否擁有許可權訪問該頁面等。如果不滿足條件，可以返回乙個許可權提示並執行重定向，否則可以渲染目標元件或頁面。
根據上述思路我們可以封裝乙個這樣的routecomponent元件，**如下：
在上面的示例中，routecomponent元件接收三個引數：
component，代表需要渲染的目標元件；
isauth，代表是否有許可權訪問該頁面；
rest，代表其他引數，傳入react-router的route元件中，例如路由路徑；
如果使用函式式元件hooks寫法，可以把路由守衛的判斷邏輯寫在專案根檔案中，通常為app.jsx中，在useeffect hook中，如果不滿足許可權條件，則通過history.push來手動重定向，**塊如下：
這裡使用了react-router v6的useroutes鉤子快速初始化路由列表，在useeffect中，如果使用者未登入，就會走history.push方法將頁面重定向到登入頁面。當然，我們也可以更加優雅一點，根據實際業務場景封裝出乙個許可權狀態獲取的use auth hook：
上述偽**塊中，在useeffect階段呼叫了getuserauth方法來請求伺服器，獲取當前使用者的許可權資訊，將資訊儲存在useauth的狀態中，返回出去，對應上面的案例，就。
當然，這個useauth只是簡單版本，可以通過具體的業務邏輯來改造，比如某個頁面只有超管才能訪問、某個頁面必須要登入才能訪問等等，把所有路由許可權相關的邏輯都整合在useauth中，就像這樣：
這樣useauth hook就複雜了起來，需要同時滿足使用者已登入並且有該頁面的許可權才能訪問，app.jsx頁面部分邏輯就變成了這樣：
當使用者未登入，則跳轉到登入頁，如果當前頁面沒有許可權，則返回到系統首頁並給出錯誤message提示。
在寫例子之前我們先了解一下：react渲染的全過程。
這個圖描述了第一次渲染以及資料更新的整個過程。
先看下第一次渲染核心步驟：
第一步：將jsx編譯為虛擬dom
第二步：將虛擬dom渲染為真實dom
將jsx編譯為虛擬dom
我們可以看到通過babel-preset-react-app輸出後。
這就是從jsx生成虛擬dom的結構，針對結構逐一分析一下。
typeof: 返回symbol
type:返回當前html元素（string） |類元件（class） |函式元件（function)
props:
標籤或元件傳遞的屬性，比如classname等等。
children：乙個（物件）或多個虛擬dom（陣列）
key：用於遍歷的。
ref：用於獲取元素或元件。
註明：這裡children是呼叫react.createelement返回的。
所以jsx生成虛擬dom的步驟是：
編譯階段將jsx生成多層巢狀的react.createelement
執行階段執行多層巢狀的react.createelement生成虛擬dom
可以用一張圖來表示：
react.creteelement底層實現
通過babel生成的我們可以看出呼叫react.createelement需要傳三個引數。
type：當前html元素（string） |類元件（class） |函式元件（function)
props：標籤或元件傳遞的屬性集。
childrens：..args, 可以傳多個子虛擬dom
現在知道了引數，也知道了返回的虛擬dom格式，我們可以反推出recat.createelement怎麼實現的。
注：key與ref與本次演示demo無關所以不是重點，**裡只是接收傳值而不會做其它處理。
實現**如下。
用自己寫的createelement替換react.createelement，再將通過babel編譯jsx後的引數傳給createelement，可以看出這與eact.createelement返回的虛擬dom是一致的。
我們再用reactdom.render執行我們自己生成的虛擬do
看下渲染的效果：
這與用原本的render渲染效果完全一致。
總結
以上就是react.createelement的底層實現， react為了方便開發者使用通過jsx簡化了生成虛擬dom的實現，這個思路也非常值得開發者學習。而我們通過babel編譯jsx後的js反推出react.createelement的實現，通過自己實現可以幫助我們了解虛擬dom的內部結構從而對react的渲染有更深的理解。
Vue全家桶 SSR Koa2全棧開發美團網
下栽 地止 為啥是地獄？因為凡是有dialog出現的頁面，其 絕對優雅不起來！因為一旦你在也個元件中引入dialog，就最少需要額外維護乙個visible變數。如果只是額外維護乙個變數這也不是不能接受，可是當同樣的dialog元件，即需要在父元件控制它的展示與隱藏，又需要在子元件中控制。為了演示我們...
大學生社團生活必備 華為學習全家桶激發你的創意
距離大學新學期僅有大概乙個月時間了，準大學生們憧憬著人生新階段的美好生活。我們都知道，大學社團是培養個人興趣 提公升綜合素質的重要途徑。需要給大家建議的是，準大學生們不僅需要考慮選擇加入哪個社團，還需要關注另乙個同等重要的方面 學習裝置的選擇。比如參與社團活動可能會涉及到許多新 創作 拍攝與剪輯的工...
塑料桶補漏最佳方法
本文將為您介紹塑料桶補漏的最佳方法，包括準備工作 補漏步驟和注意事項，幫助您有效解決塑料桶的漏水問題。1.準備工作 確保您有合適的工具和材料，如修補膠 膠帶 清潔劑等。選擇在通風良好的地方進行操作，以確保安全。2.清潔表面 在進行補漏之前，務必將塑料桶表面徹底清潔乾淨，以確保修補材料能夠附著並有效密...