すべての履歴状態に対して反応ルータルーティングコンポーネントを維持する

Question

私はCordovaでモバイルアプリケーションを作成します。 react-router@2.0.0 + ReactCSSTransitionGroupを使用して、「カードデッキ」アニメーションを実装します。私は循環リンクの可能性のない厳密なルートツリーを持っています。

パフォーマンスを向上させ、以前のルートコンポーネントの状態を保存するには、ポップステートまたはリプレースト状態でのみアンマウントすることでその履歴全体を保存したいと考えています。

どうすればよいですか？

Answer 1

これが実際に役立つと確信していますか？要点が分かれば、コンポーネントをキャッシュして、既存のルートを再訪するときにDOM構造を再作成する必要はありません（Ionicはこれを行うオプションがあると思います）。

Reactが効率的にDOMを既に更新しているはずの仮想DOM実装を使用するため、どれだけのメリットが得られるかわかりません。ルートから別のルートに移行するときには、実際のDOMとReact表現を持つdiffに従って、最小のDOMノードだけが変更されます。あなたはそれを毎回再計算する必要はありませんので、あなたのコンポーネントの状態を「キャッシュ」にしたい場合は

、データにあなたを更新するreduxとreselect（https://github.com/reactjs/reselect）のようなものを使用することがはるかに容易になります基本的にコンポーネントから状態を抽出して、必要なときにのみコンポーネントを提供します。あなたの状態はコンポーネントのマウントが解除されても生き残ります。

再選択では、関数メモを使用して、何かが変更されたときとは異なり、必要なときにのみコンポーネントに渡す小道具を再計算します。

Answer 2

configure rootRouteをコールすると、onEnterコールバックとonChangeコールバックを利用できます。

onEnterコールバックでは、最初のルートパスを記録できます。 onChangeコールバックでは、cur/nextルートパスを比較し、記録されたパス履歴をチェックし、パスを記録することができます。そのため、ルートが変更されるたびにルートパスを確認して比較することができるため、循環リンクをすべて停止することができます。

reduxを使用すると、すべてのコンポーネントの状態を保存すると、アプリ状態全体がオブジェクトのreduxストアに保存されます。

休暇の前にその時点でコンポーネントの状態を保存したい場合は、componentWillUnmountにsave component stateアクションをディスパッチし、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) { 
     ... 
    } 
}