reactjs浏览器回退按钮上的反向状态

Question

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

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

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

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

Answer 1

因此，通常的问题是“如何处理单击的浏览器回/下一个按钮？”或者“我如何应对用户浏览历史？”

在这里，像历史API和它的.pushState这样的东西就出现了。

简言之：

1. 在每一次重要的状态更改上，您称之为history.pushState(stateData)
2. 一旦用户单击“后退”按钮，它实际上不会导航到不同的URL，而只是更改当前状态(但只有当堆栈中的先前状态是用.pushState或.replaceState创建的情况下)。
3. 您的代码通过侦听波波状态事件来检测是否发生历史导航(单击后退按钮)。
4. 根据从history.state读取的适当状态数据，可以适当地还原应用程序状态。

到目前为止，最后一个问题是如何将应用程序中的所有数据放在单个对象中，并在以后恢复所有应用程序的模块状态。现在，redux来帮忙了。Redux假设您在所有应用程序上只有一个Store。换句话说，所有的状态都已经包含在单个对象中，您只需将其传递到.pushState()来存储，并在单击Back按钮后恢复它。

还记得我说过有重大变化吗？由于“整个应用程序中的所有数据”都足够大，它将造成开销，将其存储在内存中数百万次。另外，如果单击“后退”按钮，比如折叠一个下拉列表，那将是一个愚蠢的选择。

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