一般的な子ですが、ルートは異なります：子どもに再レンダリングや再マウントを避けることは可能ですか？

Question

現在のアプリでは、bodyおよびheader小道具を取るAppLayoutコンポーネントを各画面に実装しています。

body小道具はしばしば非常に異なっていますが、（かなり複雑な）headerは、さまざまな画面間で多くの繰り返し内容を持っています。時々、タイトルテキストだけが変化しています。

現在、あるルートから別のルートに移動すると、画面全体が再表示されます。これは、同様のコンテンツでは非常に無駄な操作です。 2つの画面間で共通のサブコンポーネントを再レンダリングして再マウントしないようにする方法はありますか？ルーティング設定

の

例は、これは多くは一見木々に繰り返される方法を示しています。

<Route 
    exact 
    path='/user' 
    component={()=> { 
     return (<AppLayout 
      header={<AppHeader heading="Users"/>} 
      main={<UserList/>} />); 
    } /> 
<Route 
    exact 
    path='/user/new' 
    component={()=>{ 
     return (<AppLayout 
      header={<AppHeader heading="Create user"/>} 
      main={<UserAccountAdd />} />); 
    } /> 
<Route 
    exact 
    path='/user/:userId' 
    component={({ match }) => 
     return (<AppLayout 
      header={<AppHeader heading="User profile"/>} 
      main={<UserAccountInfo userId={match.params.userId}/>} 
      />) 
    } /> 

AppHeaderコンポーネントは、基本的には、基本的に私は、見出しのタイトルをレンダリングヘッダの<p>タグが再マウントする必要があること見てきたいと思い

connected(div) 
    ReallyExpensiveFoo 
    ReallyExpensiveBar 
    <p>{this.props.title}</p> 

のように見えます。

Answer 1

Reactは、各状態の更新時にDOM全体を更新しません。その代わりに、各クラスコンポーネントは、shouldComponentUpdate()メソッドを呼び出すことによって再描画する必要があるかどうかを判断できます。機能コンポーネントの場合は、コンポーネントの小道具を単純に比較して、コンポーネントが再レンダリングするかどうかを判断するだけです。

コンポーネントをクラスコンポーネントに変換し、shouldComponentUpdate()の独自のバージョンを実装することで、コンポーネントの再レンダリングを回避できます。しかし、通常、デフォルト動作（またはReduxのconnect()HoCによって提供されるバージョン）が不必要な再レンダリングを回避し、良好なアプリケーションのパフォーマンスを提供するのに十分スマートであるため、通常は必要ありません。

Answer 2

リアクタのルータには、適切なSideBar exampleがあります。基本的には、階層内の異なる部分に対をつけてRouteを挿入するので、ルーティングの変更に対して独立して更新されます。