모든 이력 스테이트에 대해 react-router routed-component를 유지합니다.

모든 이력 스테이트에 대해 react-router routed-component를 유지합니다.

나는 Cordova로 모바일 애플리케이션을 만든다.를 사용합니다.react-router@2.0.0+ReactCSSTransitionGroup"카드 덱" 애니메이션을 구현합니다.원형 링크가 없는 엄격한 루트 트리를 가지고 있습니다.

퍼포먼스를 향상시키고 이전 루트 컴포넌트 상태를 저장하기 위해 pop-state 또는 replace-state에만 마운트 해제하여 이들 이력을 모두 유지합니다.

어떻게 하는 거야?

rootRoute 설정 시 onEnter 및 onChange 콜백을 이용할 수 있습니다.

onEnter callback에서 초기 루트 경로를 기록할 수 있습니다.onChange 콜백에서는 cur 경로와 다음 경로 경로를 비교하고, 기록된 경로 이력을 확인하고, 경로를 기록할 수 있습니다.따라서 루트가 변경될 때마다 루트 경로를 확인하고 비교할 수 있으므로 순환 링크를 모두 중지할 수 있습니다.

모든 구성 요소의 상태 저장에 대해 redux를 사용하면 전체 앱 상태를 개체인 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) {
        ...
    }
}

Ionic은 IonRouterOutlet 컴포넌트와 함께 이 기능을 제공하여 페이지 간 전환을 가능하게 합니다.구현을 따르는 것은 그리 간단한 일이 아니지만, 그들의 Repo를 볼 수 있을 것입니다.

기본적으로 React의 BrowserRouter를 랩하고 렌더링된 모든 경로를 유지하며 css를 통해 가시성을 전환합니다.

이는 성능 향상을 위한 것이 아니라 전환을 허용하는 것을 의미합니다.퍼포먼스를 향상시키기는커녕 오히려 방해가 될 수 있습니다.예를 들어, 다음을 통해 리소스를 청소하는 경우useEffect정리 함수 또는componentWillUnmount().

이게 정말 도움이 될 거라고 확신해요?요점을 알 수 있으면 컴포넌트를 캐시하여 기존 경로를 재방문할 때 DOM 구조를 다시 작성할 필요가 없도록 하십시오(Ionic에는 이 작업을 수행할 수 있는 옵션이 있다고 생각합니다).

React는 이미 효율적인 방법으로 DOM을 업데이트해야 하는 가상 DOM 구현을 사용하기 때문에 얼마나 많은 이점을 얻을 수 있을지 모르겠습니다.루트에서 다른 루트로 이행할 경우 실제 DOM 및 React 표현과의 차이에 따라 최소 DOM 노드만 변경됩니다.

'캐시를 하는 예요.redux ★★★★★★★★★★★★★★★★★」reselect( https://github.com/reactjs/reselect) 에서는 컴포넌트에 필요한 경우에만 데이터를 갱신하여 컴포넌트에서 상태를 추출할 수 있습니다.그러면 구성 요소의 마운트 해제 후에도 상태가 유지됩니다.

reselect는 기능 메모화를 사용하여 필요한 경우에만 컴포넌트에 전달한 소품을 재계산합니다.변경이 있을 때마다 다시 선택합니다.

언급URL : https://stackoverflow.com/questions/36088020/keep-react-router-routed-components-for-all-history-states