루트 상태 변경 후 모든 자식 구성 요소를 다시 탑재합니다.

Question

상당히 큰 응용 프로그램을 구축 중이며 루트 구성 요소 상태 변경을 기반으로 응용 프로그램을 다시 렌더링하는 가장 좋은 방법에 대한 통찰력을 얻고 자합니다.

성공적으로 로그인 한 후 내 아키텍처에서

<Route path="/" component={App}> 
<Route component={Layout}> 
    <IndexRoute component={Page} /> 
    <Route path={page} component={Page}></Route> 
    ... 
</Route> 
<Route component={Layout}> 
    <IndexRoute component={Page} /> 
    <Route path={page} component={Page}></Route> 
    ... 
    </Route> 

샘플 아키텍처 난 내 응용 프로그램 구성 요소에서 사용자의 데이터를 저장하고있다. 모든 사용자는 표시 할 클라이언트 데이터베이스/데이터에 대한 식별자로 사용되는 클라이언트 키를 가지고 있습니다. 달성하고자하는 동작은 클라이언트가 변경된 후에 새 클라이언트 데이터로 현재 페이지를 업데이트하는 것입니다.

이제 내 구성 요소에서 내 구성 요소로 내 데이터를 전달할 수 있지만 다음 두 가지 이유로 비효율적이라고 생각합니다.

1. 내 앱 구성 요소를 렌더링하기 전에 모든 경로에 대한 데이터를 가져와야합니다.
2. 내 앱 구성 요소를 다시 렌더링 할 때까지 내 데이터가 '부실'하게됩니다. 때문에 각 페이지는 componentWillMount 수명주기 후크를 사용하고, 페이지 하위 구성 요소에 소품으로 아래로 데이터를 전달 그 자체가 데이터를 가져올 수 있도록 결정이 이유

. 내가 탐색 할 때 각 페이지에 대한 최신 데이터를 가져올 수 있기 때문에이 기능은 저에게 효과적입니다.

내가 현재 겪고있는 것은 클라이언트 변경 후 응용 프로그램이 다시 렌더링되지만 현재 페이지가 이미 마운트되었으므로 새 클라이언트 데이터를 가져 오지 않기 때문입니다. 하지만 현재 페이지에서 다른 페이지로 이동 한 다음 페이지로 돌아 가면 예상대로 작동합니다.

내가 염두에두고있는 한 가지 해결책은 사용자 데이터를 각 페이지로 전달하고 componentWillReceiveProps 라이프 사이클 후크를 사용하고 새로운 데이터를 가져 오기 위해 비교 검사를 수행하는 것입니다. 내 응용 프로그램이 40 개 이상의 페이지를 가질 것이기 때문에 가능하다면이를 방지하고 싶습니다.

의견을 보내 주시면 대단히 감사하겠습니다. 당신이 언급 한 내용을

Answer 1

약

각 페이지 아래로 사용자 데이터를 전달하고 componentWillReceiveProps 수명주기 후크를 사용하여 새로운 데이터를 가져 오기 위해 비교 검사를 수행.

은 완벽합니다. 야생에서 이러한 패턴의 몇 가지 예 :

• 돌아 오는 저장소 real world example
• 는 라우터의 핵심 팀이 문제 here에 따라도이 방법을 권장 반응한다.