34

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

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

怎么做？

4

3 回答 3

0

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

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

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

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

于 2016-05-11T13:03:41.797 回答
0

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

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

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

于 2021-12-05T18:19:22.087 回答
0

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

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

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

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

这是一个片段：

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) {
        ...
    }
}
于 2016-11-03T03:17:35.073 回答