Question

我使用Cordova制作移动应用程序。使用react-router@2.0.0 + ReactCSSTransitionGroup来实施＆＃34;卡片组＆＃34;动画。我有一个严格的路由树，没有圆形链接的可能性。

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

怎么做？

Answer 1

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

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

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

重新选择使用函数记忆来重新计算只在需要时才传递给组件的道具，而不是每次都有变化。

Answer 2

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

在onEnter回调中，您可以记录初始路径路径。在onChange回调中，您可以比较cur / next路径，检查记录的路径历史记录和记录路径。因此，您可以在每次路线更改时检查和比较路径路径，您可以停止任何循环链接。

关于保存所有组件的状态，如果使用redux，整个app状态可以保存在一个对象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) {
        ...
    }
}

保留所有历史状态的react-router路由组件

2 个答案: