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来更改选项卡？！这是反应路由器如何工作，还是我做错了什么？

这个问题已经被问到here，但是接受的答案是关于'重新渲染'而不是重新构建组件。

Answer 1

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

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

1 个答案: