为所有历史状态保留 react-router 路由组件答案

【问题标题】：Keep react-router routed-components for all history states为所有历史状态保留 react-router 路由组件
【发布时间】：2016-07-05 10:08:30
【问题描述】：

我使用 Cordova 制作了一个移动应用程序。使用react-router@2.0.0 + ReactCSSTransitionGroup 实现“卡片组”动画。我有一个严格的路由树，没有循环链接的可能性。

为了提高性能并保存以前路由组件的状态，我想保留它们的整个历史记录，仅在 pop-state 或 replace-state 上卸载。

怎么做？

【问题讨论】：

标签： reactjs react-router reactcsstransitiongroup

【解决方案1】：

你确定这真的有用吗？如果我明白你的意思，你想“缓存”组件，这样当你重新访问现有路由时，不需要重新创建 DOM 结构（我认为 Ionic 可以选择这样做）。

我不确定你会得到多少好处，因为 React 使用了一个虚拟 DOM 实现，它应该已经以一种有效的方式更新 DOM。当你从一个路由转换到另一个路由时，根据与真实 DOM 的差异和你的 React 表示，只会更改最少的 DOM 节点。

如果您想“缓存”组件的状态，这样您就不必每次都重新计算它，那么使用 redux 和 reselect (https://github.com/reactjs/reselect) 之类的东西会容易得多仅在需要时更新您提供给组件的数据，基本上完成从组件中提取状态。然后，您的状态将在组件卸载后继续存在。

Reselect 使用函数记忆来仅在需要时重新计算传递给组件的道具，而不是每次发生变化时。

【讨论】：

一个用例是保留滚动位置并进行反向转换以返回到先前的确切状态（有许多隐含的隐藏状态，如输入状态、滚动位置等。未涵盖通过反应）

【解决方案2】：

也许您可以在配置 rootRoute 时利用 onEnter 和 onChange 回调。

在 onEnter 回调中可以记录初始路由路径。在 onChange 回调中，您可以比较当前/下一个路由路径，检查记录的路径历史记录和记录路径。因此，每次路线变化时，您都可以检查和比较路线路径，您可以停止任何循环链接。

关于保存所有组件的状态，如果你使用redux，整个应用程序的状态可以保存在一个对象中，redux store。

如果你想在离开之前保存组件当时的状态，你可以在componentWillUnmount中发送一个save component state动作，在componentWillMount中恢复状态。

这是一个sn-p：

var rootRoute = {
    path: '/',
    onEnter: enter,
    onChange: change,
    component: MyApp,
    indexRoute: { component: Home },
    childRoutes: [
        LoginRoute,
        ...
        {path: 'home', component: Home},
        {
            path: '*',
            component: NotFound
        }
    ]
};

function enter (next) {
    // pathStore record all navigation history
    pathStore.record(next.location.pathname);
}
function change (cur, next, c) {
    // when hit cur path links in nav, pathname is same, key is different.
    if (cur.location.pathname !== next.location.pathname) {
        ...
    }
}

【讨论】：

【解决方案3】：

Ionic 通过其IonRouterOutlet 组件提供此功能，以允许页面之间的转换。遵循实现并不是一件容易的事，但也许你可以看看他们的Repo。

他们所做的基本上是包装 React 的 BrowserRouter 并保持所有路由的渲染 - 通过 css 切换它们的可见性。

请注意，这并不是为了提高性能，而是允许转换。它实际上可能会阻碍它，而不是提高性能。例如通过useEffect清理函数或componentWillUnmount()清理资源。

【讨论】：