React路由器在切换路由时调用组件构造函数

我正在使用具有导航功能的SPA的react和react-router。每次切换导航项目时，路由器都会调用响应组件的“构造函数”。这里是代码的相关位：React路由器在切换路由时调用组件构造函数

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，但接受的答案是关于“重新渲染”而不是重新构建组件。

来源

2016-11-24 mavili

每次组件加载时都调用构造函数。每次您导航到位置/时，<Home>组件都将挂载。当您导航到其他位置时，<Home>组件将被卸载。如果你想让状态在导航中保持不变，那么它应该保持在树上更高。

来源

2016-11-25 01:20:54

React路由器在切换路由时调用组件构造函数

回答

相关问题