라우터가 경로를 전환 할 때 구성 요소 생성자를 호출합니다.

Question

탐색 기능이있는 SPA에 대해 반응 및 반응 라우터를 사용하고 있습니다. 라우터는 탐색 항목이 전환 될 때마다 반응 구성 요소 '생성자'를 호출합니다. 여기에 코드의 관련 비트입니다 :

class Home extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log('component constructed!'); 
     this.state = { 
      counter: 0 
     } 
     setInterval(() => this.setState({ 
      counter: this.state.counter+1 
     }), 1000) 
    } 

    render() { 
     return (
      <h3>Counter: {this.state.counter}</h3> 
     ); 
    } 
} 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
      <Route path="profile" component={Profile} /> 
      <Route path="settings" component={Settings} /> 
     </Route> 
    </Router>, 
    document.getElementById('container') 
); 

내가 다른 하나 개의 탭에서 전환 할 때마다 카운터가 분명히 내가 render() 때마다 호출 할 필요가 있음을 이해 0 에서 시작은 상태 변경 또는 라우터가 탭을 전환 할 때 , 그러나 왜 tab의 변경을 위해 constructor를 불러야합니까?! 그것이 반응 라우터가 작동하는 방식입니까, 아니면 제가 잘못하고있는 것입니까?

이 질문은 here에게 질문했지만 대답은 구성 요소의 재구성이 아니라 '다시 렌더링'에 관한 것입니다.

Answer 1

구성 요소가 탑재 될 때마다 생성자가 호출됩니다. / 위치로 이동할 때마다 <Home> 구성 요소가 탑재됩니다. 다른 위치로 이동하면 <Home> 구성 요소가 마운트 해제됩니다. 상태가 네비게이션을 통해 지속되도록하려면 트리 위로 올라야합니다.