リアクタ・ルータ：ルート構造のメリット/デメリット

Question

これは今のところ私の頭の中にあります。誰かが洞察力を持っているのだろうかと思っていた。上記の例の私のユーザーコンポーネントがprops.childrenを通じてプロフィールコンポーネントをレンダリングすることになるで

<Route path="/" component={Container}> 
    <Route path="user" component={Users}> 
     <Route path="user/:id" component={Profile} /> 
    </Route> 
</Route> 

：

はここで2つの例です。私はプロフィールでユーザーコンポーネントをインポートする必要があります以外

<Route path="/" component={Container}> 
    <Route path="user" component={Users} /> 
    <Route path="user/:id" component={Profile} /> 
</Route> 

この例では、最初のと本質的に同じになります。

各アプローチには、パフォーマンスやアーキテクチャの面でメリットとデメリットがありますか？

どのような考えにも感謝します。

Answer 1

これはパフォーマンス上の問題を引き起こす可能性は非常に低く、2つのオプションはちょうど異なる方法で構成され、異なる動作をします。より良い選択肢はありません。あなたのアプリにとって最も理にかなった選択肢だけです。

覚えておくべき最も重要なことは、childrenが単なる小道具であることです。小道具を変更しても、コンポーネントはアンマウントされません。ただし、新しいchildrenは、先にchildrenのマウントを解除します。あなたはuser/1に移動し、その後user/5に移動後に、Profileコンポーネントは、その後アンマウント、一度マウントしているかどうあなたの最初の例では

は、再度マウント..しかしUsersは一度しか搭載しています。

2番目の例で同じことを行うと、UsersとProfileがマウントされます---両方のマウントを解除して再度マウントします。これは、このシナリオでchildrenが変更されているため、Containerのものです。

あなたのアプリに関する他の情報がないと、最初のシナリオがより望ましいと思われます。コンポーネントのマウント/マウント解除が少ないためです。おそらくあなたはそのような状態を保持できますが、行う。