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 event 来检测历史导航是否发生（单击后退按钮）
4. 根据您从 history.state 读取的适当状态数据，您可以适当地恢复应用程序状态

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

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

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