React Router вызывает компонентный конструктор при переключении маршрутов

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') 
); 

Каждый раз, когда я переключаюсь с одной вкладки на другую, то счетчик начинается с 0. Очевидно я понимаю, что render() следует называть каждый раз, когда его состояние изменяется или когда маршрутизатор переключает вкладки , но зачем звонить constructor для смены вкладки ?! Так работает реактивный маршрутизатор, или я делаю что-то неправильно?

Этот вопрос задан here, но принятый ответ говорит о «повторном рендеринге», а не о перестройке компонента.

Answer 1

Конструктор вызывается каждый раз, когда компонент монтируется. Каждый раз, когда вы переходите к местоположению /, компонент <Home> будет монтироваться. Когда вы перейдете в другое место, компонент <Home> отключится. Если вы хотите, чтобы состояние было постоянным в навигации, оно должно поддерживаться выше дерева.