Javascript 设计可重用组件的状态和浏览器历史记录

我正在寻找在React组件中构造状态的方法，这样我就可以同时实现两个目标：（1）管理复杂应用程序中的浏览器历史记录，以及（2）让单个组件在主应用程序之外的环境中易于重用

该应用程序有一个面板组件，允许用户浏览和阅读我们网站上的内容。在主应用程序中，多个面板可以一起打开和排列。在主应用程序之外，还有其他一些页面，我希望能够轻松地插入单个面板组件

由于这段代码已经开发到目前为止，每个面板都有一个丰富的状态，表示它已加载的内容和其他显示设置。这使得它很容易进入另一个页面-我可以只渲染一个面板组件，用户可以与它交互，它会自行处理

然而，对于浏览器历史来说，这是一个棘手的问题。有一个应用程序组件，它管理多个面板和从历史中推送和弹出的状态。为了让它对整个应用程序的状态有一个完整的了解，当发生更改时，每个面板都会向上推一份状态副本。当状态从历史中弹出时，应用程序组件可以从其呈现的每个面板传递initialState。正如您可以想象的那样，随着更新循环的结束，这变得混乱且容易出错

我觉得我需要采取的方法是集中化状态（建议中的一种），并尝试使每个面板无状态。由于重写代码中已经存在的对

setState

的所有调用将是一项巨大的工作，因此我试图评估这是否是唯一的方法。这种方法也会使在应用程序之外重用组件变得更加困难。我将失去一种感觉，即面板是一个自包含的组件，我只能在页面上呈现，因为它还需要某种外部管理器来处理它的状态以及从内部改变它的所有事件

---

你推荐什么

我在react上制作了一个应用程序，并实现了react路由器。您可以将URL数据传递到每个面板，知道处于什么状态以及加载了什么内容，例如，您可以有一个URL，如： “2014年9月19日”

要重用面板，您可以创建一个url，该url创建了一个herarchical route视图：您可以在必须加载的render wich视图上传递您想要知道的所有组件

我的RouterDome示例

---

我建议调查react router。

这可能会因为要求提供建议而关闭，而不是出现问题，但我觉得您下一步要做的是建立一个基于流量的框架，例如。关于浏览器历史，您有没有查看过这样的库？我同意前面的两条评论，但是你能详细描述一下你所储存的历史吗？它只是一个面板打开/关闭历史记录，还是将“富数据”序列化为url或其他完全不同的内容？基本上，应用程序的完整状态正在序列化为url。这包括哪些面板处于打开状态以及它们处于什么状态。每个面板都可以加载特定的内容，并且在用户浏览面板中的内容时也可以处于导航状态。在应用程序组件中有一个函数

shouldHistoryUpdate

，该函数通过

componentdiddupdate

调用。它检查状态更改，并确定是否需要将其推送到浏览器历史记录中。