切换路由时，React Router会调用组件构造函数

Question

我正在为带有导航的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要更改选项卡呢？那是React-Router的工作方式，还是我做错了什么？

这里已经问了这个问题，但是被接受的答案是关于“重新渲染”而不是组件的重新构造。

Answer 1

每次安装组件时，都会调用构造函数。每次导航到该位置时/，<Home>组件都会安装。当您导航到另一个位置时，该<Home>组件将被卸载。如果希望状态在导航中保持不变，则应将其保持在树的更高位置。