反應中的瀏覽器后退按鈕反轉狀態

Question

為了獲得一致的用戶體驗，我希望我的反應應用程序在用戶單擊瀏覽器后退按鈕時可以反轉其狀態。

例如，如果我使用函數調用更改狀態中的元素：

  changeVar = (idx) => (event) => {
    this.setState({thisIndex: idx});
    //how to notify browser stack of this change?
  }

我怎樣才能將它添加到瀏覽器堆棧中，以便用戶可以單擊瀏覽器中的后退按鈕來反轉狀態更改？

Answer 1

所以一般來說問題是“如何處理瀏覽器Back / Next按鈕？” 或者“我如何對用戶導航歷史做出反應？”

像History API及其.pushState這樣的東西來到現場。

簡而言之：

1. 在每個重要的狀態更改上，您調用history.pushState(stateData)
2. 一旦用戶單擊“返回”按鈕，它實際上不會導航到不同的URL而只改變當前狀態（但僅當堆棧中的先前狀態已使用.pushState或.replaceState創建時）
3. 您的代碼通過偵聽popstate事件來檢測是否發生了歷史記錄導航（單擊了“后退”按鈕）
4. 根據您從history.state讀取的相應狀態數據，您可以適當地恢復應用程序狀態

到目前為止，最后一個問題是如何將應用程序中的所有數據放在單個對象中，並在以后使用模塊的狀態恢復所有應用程序。 在這里，redux得到了幫助。 Redux假設您在所有應用程序上只有一個Store。 換句話說，所有狀態都已包含在單個對象中，您只需將其傳遞到.pushState()以存儲並在單擊“返回”按鈕后將其還原。

PS還記得我講過有關重大變化嗎？ 因為“整個應用程序中的所有數據”足夠大，所以會在存儲器中存儲數百萬次存儲的開銷。 如果單擊“返回”按鈕說只是折疊下拉列表，那將是一個愚蠢的行為。

PPS並且由於history是全局的，因此無法按組件方式存儲/恢復狀態。 所以也許（只是可能）最好為您的組件實現類似“狀態更改歷史記錄”的內容，並建議用戶使用一些不同的控件來恢復其狀態（而不是單擊瀏覽器中的“返回”按鈕）