通過使用歷史記錄 API 來存儲狀態(tài)，在 React 應(yīng)用中管理頁面狀態(tài)?！　?/p>

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

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

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

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

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

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

　　通過使用 URL 來保持狀態(tài)，我們可以共享鏈接(CodePen 不會共享，因為它使用 iframe 來呈現(xiàn)結(jié)果頁)。

　　結(jié)論

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