Поддерживайте маршрутизируемые компоненты маршрутизации для всех состояний истории

Я делаю мобильное приложение с Кордовой. Используйте [email protected] + ReactCSSTransitionGroup для реализации анимации "колоды карт". У меня есть строковое дерево маршрутов без возможности круговых связей.

Чтобы повысить производительность и сохранить состояние предыдущих компонентов маршрута, я хотел бы сохранить всю историю их размонтирования только в состоянии pop-state или replace-state.

Как это сделать?

Ответ 1

Вы уверены, что это действительно поможет? Если я получу вашу точку зрения, вы хотите "кэшировать" компоненты, чтобы при повторном просмотре существующего маршрута нет необходимости воссоздавать структуру DOM (я думаю, что у Ionic есть возможность сделать именно это).

Я не уверен, какую выгоду вы получите, поскольку React использует виртуальную реализацию DOM, которая должна уже эффективно обновлять DOM. Когда вы переходите с маршрута на другой, только минимальные узлы DOM будут изменены в соответствии с разницей с реальным DOM и вашим представлением React.

Если вы хотите "кэшировать" состояние ваших компонентов, поэтому вам не нужно каждый раз пересчитывать его, тогда было бы намного проще использовать что-то вроде redux и reselect (https://github.com/reactjs/reselect), чтобы обновлять данные, которые вы предоставляете своим компонентам только в случае необходимости, в основном завершая извлечение состояния из ваших компонентов. Тогда ваше состояние выживет при отключении компонента.

Reselect использует функцию memoization для пересчета реквизита, который вы передаете своим компонентам только тогда, когда это необходимо, в отличие от каждого изменения времени.

Ответ 2

Возможно, вы можете воспользоваться onEnter и onChange обратные вызовы при настройке rootRoute.

В обратном вызове onEnter вы можете записать начальный маршрут маршрута. В обратном вызове onChange вы можете сравнить cur/next route path, проверить записанную историю пути и путь записи. Поэтому, поскольку вы можете проверять и сравнивать маршрут маршрута при каждом изменении маршрута, вы можете остановить любые круговые ссылки.

О сохранении всего состояния компонента, если вы используете сокращение, все состояние приложения может сохранять в объекте, хранилище redux.

Если вы хотите сохранить состояние компонента в это время перед отпуском, вы можете отправить действие 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) {
        ...
    }
}