일반적인 자식이지만 다른 루트 : 자식에서 다시 렌더링하고 다시 마운트하는 것을 피할 수 있습니까?

Question

현재 앱의 각 화면에는 AppLayout 구성 요소가 구현되어 있습니다.이 구성 요소는 body 및 header 소품이 필요합니다.

body 소품은 종종 매우 다르지만 (매우 복잡한) header은 다양한 화면 사이에 반복되는 콘텐츠가 많습니다. 때로는 제목 텍스트가 변경됩니다.

현재 한 경로에서 다른 경로로 이동하면 전체 화면이 재 렌더링되고 유사한 콘텐츠가 주어지면 상당히 낭비적인 작업이됩니다. 두 개의 화면 사이에 공통 하위 구성 요소를 다시 렌더링하고 다시 마운트하는 것을 피할 수있는 방법이 있습니까? 라우팅 설정

의

예이 많이 보이는 나무에서 반복하는 방법을 보여줍니다.

<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 구성 요소는 기본적으로

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

은 기본적으로 내가 본 싶습니다처럼 보이는 제목 제목이 다시 마운트해야 렌더링 헤더의 <p> 태그입니다.

Answer 1

React가 각 상태 업데이트에서 전체 DOM을 업데이트하지 않습니다. 대신 각 클래스 구성 요소는 shouldComponentUpdate() 메서드를 호출하여 다시 렌더링해야하는지 결정할 수 있습니다. 기능 구성 요소의 경우, 구성 요소 소품을 단순히 비교하여 구성 요소를 다시 렌더링해야하는지 결정합니다.

구성 요소를 클래스 구성 요소로 변환하고 shouldComponentUpdate()의 고유 한 버전을 구현하여 구성 요소를 다시 렌더링하지 않아도됩니다. 그러나 일반적으로 기본 동작 (예 : Redux의 connect() HoC가 제공하는 버전)은 불필요한 다시 렌더링을 피하고 우수한 응용 프로그램 성능을 제공 할만큼 똑똑하기 때문에 필요하지 않습니다.

Answer 2

리액터 라우터는 사이트에서 매우 관련성이 높은 SideBar example을 가지고 있습니다. 기본적으로 계층 구조의 다른 부분에 쌍으로 Route을 삽입하므로 라우팅 변경에 독립적으로 업데이트됩니다.