ReactJS 中浏览器后退按钮的反转状态

Question

为了获得一致的用户体验，我希望我的 React 应用程序在用户单击浏览器后退按钮时反转其状态。

例如，如果我通过函数调用更改状态中的元素：

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

如何将其添加到浏览器堆栈中，以便用户可以单击浏览器中的后退按钮来反转状态更改？

Answer 1

所以一般问题是“我如何处理点击浏览器后退/下一步按钮？” 或“我如何对用户浏览历史记录做出反应？”

这里像History API这样的东西就.pushState出现了。

简而言之：

1. 在您调用的每个重大状态更改上history.pushState(stateData)
2. 一旦用户单击“后退”按钮，它实际上不会导航到不同的 URL，而是仅更改当前状态（但前提是堆栈中的先前状态已使用.pushState或创建.replaceState）
3. 您的代码通过侦听popstate 事件来检测历史导航是否发生（单击后退按钮）
4. 根据您从中读取的适当状态数据history.state适当地恢复应用程序状态

到目前为止，最后一个问题是如何将应用程序中的所有数据放入单个对象中，并稍后使用其模块的状态恢复所有应用程序。这里 redux 可以提供帮助。Redux 假设您的所有应用程序只有一个 Store。换句话说，所有状态都已包含在单个对象中，您只需传递到该对象即可.pushState()存储并在单击“后退”按钮后恢复它。

PS 记得我说过重大变化吗？由于“应用程序中的所有数据”足够大，因此将其存储在内存中数百万次会产生开销。另外，如果单击“后退”按钮说只是折叠下拉菜单，那也是很愚蠢的。

PPS 并且由于history是全局的，因此无法以每个组件的方式存储/恢复状态。所以也许（只是也许）最好为您的组件实现“状态更改历史记录”之类的东西，并建议用户使用一些不同的控件来恢复其状态（而不是单击浏览器中的“后退”按钮）