React 컴포넌트에서 마운트 및 마운트 해제 상태를 유지하려면 어떻게합니까?

Question

지금 당장은 상단에 헤더가있는 일종의 탭 레이아웃에 세 가지 주요 구성 요소가 있으며 그 중 하나가 활성화되어있는 것은 매우 간단한 해시 라우터가있는 최상위 수준의 App 구성 요소에서 제어됩니다.

이제 프로필 구성 요소에 상태를 설정하면 다른 구성 요소 중 하나로 전환하면 상태가 벗어납니다.

어떻게 방지 할 수 있습니까? 대신 App 구성 요소에 상태를 놓아야합니까, 아니면 Redux 또는 Flux와 같은 것이 유용할까요?

Home | About | Profile 
----------------------------------- 
|         | 
| Content       | 
... 

최고 수준의 구성 요소 :

function App(props) { 
    switch (props.location[0]) { 
    case '': 
     return <Home />; 
    case 'about': 
     return <About />; 
    case 'profile': 
     return <Profile />; 
    default: 
     return <NoMatch />; 
    } 
} 

App.propTypes = { 
    location: React.PropTypes.array.isRequired, 
}; 

function renderOnHashChange() { 
    let location = window.location.hash.replace(/^#\/?|\/$/g, '').split('/'); 
    const application = <App location={location} />; 

    ReactDOM.render(application, document.getElementById('app')); 
} 

window.addEventListener('hashchange', renderOnHashChange, false); 

renderOnHashChange(); 

Answer 1

간단한 대답은 앱의 글로벌 상태를 유지하기 위해 저장소의 어떤 종류를 사용해야한다는 것입니다. 당신이 선택한 것을 당신에게 달려 있습니다. 이미 인기있는 예제를 발견했지만 더 많은 예제가 있습니다. 작업을 발송하여 상점을 업데이트하십시오.

최상위 구성 요소에 상태를 추가하는 것을 권장하지 않습니다.이 경우 모든 응용 프로그램 계층을 통해 콜백을 전달해야 setState을 호출해야합니다.