javascript - 为 Reusable React Components 和 Browser history 设计状态

Question

我正在寻找在我的 React 组件中构建状态的方法，以便我可以一起实现两个目标:(1) 在复杂的应用程序中管理浏览器历史记录，以及 (2) 让单个组件可以在外部环境中轻松重用主要应用程序。

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

随着这段代码的发展，每个 Panel 都有一个丰富的状态，表示它加载了什么内容和其他显示设置。这使得进入另一个页面变得容易 - 我可以只渲染一个 Panel 组件，用户可以与之交互，它会自行处理。

然而，对于浏览器历史记录，这就变得很棘手了。有一个 App 组件管理多个面板以及从历史记录中推送和弹出的状态。为了让它能够全面了解整个应用程序的状态，每个面板都会在发生更改时推送其状态的副本。当状态从历史中弹出时，App 组件可以从它呈现的每个面板传递一个 initialState。正如您所想象的，随着更新周期最终相互循环，这变得困惑且容易出错。

感觉我需要采取的方法是集中状态(按照建议 here )并尝试使每个单独的面板无状态。由于重写代码中已有的对 setState 的所有调用需要付出很大的努力，因此我正在尝试评估这是否是唯一的方法。还感觉这种方法会使在应用程序外部重用组件变得更加困难。我将不再觉得 Panel 是一个独立的组件，我可以在页面上呈现它，因为它还需要某种外部管理器来处理它的状态以及从内部改变它的所有事件。

你会推荐什么？

Answer 1

我做了一个关于 React 的应用程序并实现了 React-Router，你可以将 URL 数据传递给每个面板，知道它们处于什么状态以及加载了什么内容，例如你可以有一个像这样的 URL: http://yoururl.com/index/user/userID1/item/itemID2/filterDate?= “2014 年 9 月 19 日”

要重用您的面板，您可以创建一个 url 来创建一个分层的路由 View :您可以传递 throw 组件您想要在必须加载的渲染 View 上知道的所有内容。

我的 routerDom 示例

我建议调查 react-router。