리액터 라우터 : 라우트 구조의 장점/단점

Question

이것은 지금 당분간 내 마음 속에 있습니다. 누군가 통찰력을 가지고 있는지 궁금 해서요. 위의 예에서 제 사용자props.children 성분 통해 프로필 성분 렌더링 될에서는

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

:

여기서 두 가지 예이다. 내가 프로필에 사용자에게 구성 요소를 가져올 필요가 제외

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

이 예제에서는 첫 번째로 본질적으로 같은 것이다.

성능 및/또는 아키텍처 측면에서 각 접근법에 장단점이 있습니까?

의견을 보내 주시면 감사하겠습니다.

Answer 1

성능상의 문제가 발생할 가능성은 거의 없지만 두 옵션은 다르게 구성되어 있으며 다르게 작동합니다. 더 나은 선택은 없습니다. 앱에 가장 적합한 선택 만합니다.

가장 중요하게 염두에 두어야 할 점은 children은 단지 소품 일뿐입니다. 소품을 바꾸어도 구성 요소가 마운트 해제되지 않습니다. 그러나 새 children은 이전 children을 언 마운트시킵니다. 당신이 user/1로 이동 한 다음 나중에 user/5로 이동 한 경우 첫 번째 예에서

는 Profile 구성 요소는 다음 마운트 해제 한 번 장착 다시 장착 ..하지만 Users 한 번 장착 만 것이다 것입니다.

두 번째 예제에서 똑같은 작업을 수행하면 Users 및 Profile이 마운트되고 --- 다시 마운트 해제되고 다시 마운트됩니다. 이것은이 시나리오에서 children이 변경되는 것이므로 Container입니다.

앱에 대한 다른 정보가 없으면 첫 번째 시나리오가 더 바람직합니다. 일부 구성 요소는 마운트/마운트 해제 할 수 있기 때문에 더 바람직 할 것 같습니다. 어쩌면 일부 상태는 그대로 유지할 수 있지만 앱이 필요로하는 것에 달려 있습니다. 해야 할 것.