通過使用歷史記錄 API 來存儲(chǔ)狀態(tài)，在 React 應(yīng)用中管理頁(yè)面狀態(tài)。

　　React 中有許多狀態(tài)管理庫(kù)，例如 Redux、重匹配、反沖，當(dāng)然，您可以使用 React 上下文來管理頁(yè)面狀態(tài)。這些都非常有用，但是存在一個(gè)問題 - 當(dāng)我們刷新頁(yè)面時(shí)，頁(yè)面狀態(tài)將丟失，并且頁(yè)面狀態(tài)將不可共享。例如，如果你在 React 應(yīng)用列表頁(yè)中篩選某些數(shù)據(jù)，并希望與可以直接看到結(jié)果的人共享頁(yè)面 URL，則無法僅使用狀態(tài)管理來實(shí)現(xiàn)它。

　　本文將介紹如何使用歷史記錄 API 來增強(qiáng) React 狀態(tài)，以便可以共享狀態(tài)，并且在刷新頁(yè)面后頁(yè)面顯示不會(huì)更改。

　　具有網(wǎng)址的持久狀態(tài)

　　大多數(shù) npm 模塊使用本地存儲(chǔ)來保存 React 應(yīng)用程序中的頁(yè)面狀態(tài)，如還原持久化 — npm (npmjs.com)、使用持久狀態(tài) — npm (npmjs.com)。通過使用localStorage，我們可以存儲(chǔ)復(fù)雜數(shù)據(jù)或大數(shù)據(jù)，并且在刷新頁(yè)面時(shí)，我們可以恢復(fù)狀態(tài)，這對(duì)用戶來說是一種更好的體驗(yàn)，尤其是在移動(dòng)頁(yè)面上。

　　對(duì)于大多數(shù)列表頁(yè)面，我們只需要保留一些狀態(tài)的過濾動(dòng)作，我們就可以使用URL來存儲(chǔ)狀態(tài)。假設(shè)我們只需要存儲(chǔ)一個(gè)字段，我們可以使用這個(gè) React 鉤子：

　　使用鉤子函數(shù)后，它將獲取 URL 查詢以初始化篩選器變量，我們可以使用 setData 來存儲(chǔ)狀態(tài)，并將狀態(tài)存儲(chǔ)為 URL。filter

　　通過使用 URL 來保持狀態(tài)，我們可以共享鏈接(CodePen 不會(huì)共享，因?yàn)樗褂?iframe 來呈現(xiàn)結(jié)果頁(yè))。

　　結(jié)論

　　我們可以使用本地存儲(chǔ)來持久化狀態(tài)，也可以使用URL來做到這一點(diǎn)。如果我們需要與某些預(yù)設(shè)的過濾器/選項(xiàng)共享頁(yè)面URL，則使用URL來存儲(chǔ)狀態(tài)將很方便。如果狀態(tài)數(shù)據(jù)非常大，我們可以將其保存到后端SQL，并帶有一個(gè)可以與其他人共享的短ID。