Javascript React路由器-组件在父组件状态更改时重新加载？

在我的React应用程序中，我有一个ResponsiveDrawer组件。它基本上只是一个React组件，它用菜单项列表、标题栏和内容框架呈现抽屉

它的州里有移动电话

state = {
    mobileOpen: false
};

当用户单击汉堡包图标时会发生哪些变化

handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
};

(...)

<Drawer type="temporary" anchor="left" open={this.state.mobileOpen} classes={{paper: classes.drawerPaper}} onRequestClose={this.handleDrawerToggle} ModalProps={{keepMounted: true // Better open performance on mobile.}}>
    <div>
        <div className={classes.drawerHeader} />
        <Divider />
        <MenuList onRequestClose={this.handleDrawerToggle} />
    </div>

我还在ResponsiveDrawer的内容中设置了一些路由：

<main className={classes.content}>
    <div className={classes.contentWrapper}>
        <Switch>
            <Route
                exact
                path="/currencies"
                component={CurrenciesComponent}
            />
            <Route
                exact
                path="/"
                component={ProfileComponent}
            />
            <Route component={NotFoundComponent} />
        </Switch>
    </div>
</main>

路线中的Currency组件定义如下：

const CurrenciesComponent = () => (
        <Currencies isSignedIn={this.isSignedIn} />
    );

当我点击汉堡包图标时，ResponsiveDrawer的状态会发生变化，但是currenceComponent也会重新加载。我在那里有一个API调用，需要几秒钟才能完成，所以我希望避免这种情况

如果我按照以下方式定义路线，而不将道具传递给货币组件，则不会发生这种情况：

<Route exact path="/currencies" component={Currencies} />

---

那么，在指定路线时，如何避免重新渲染并同时向货币提供道具呢？

您可以告诉组件是否应该更新

作为React生命周期的一部分，每个组件都有一个方法，该方法在每次收到更新信号时都会运行。从该函数返回true将通知组件更新，返回false将通知组件不更新

---

由于您所做的只是要求它在道具保持不变的情况下不要渲染，因此您可以使用而不是组件。PureComponent实现shouldComponentUpdate，除非道具或状态已更改，否则不会更新。

我使用render而不是component道具解决了这个问题：

<Route exact path="/currencies" render={CurrenciesComponent}/>

---

我认为这与子组件的生命周期无关。原因是，在我的第一个示例中调用了货币组件的构造函数。所以不管shouldComponentUpdate如何，它都会更新。构造函数被调用两次？一次加载，一次打开抽屉？没错，但只有当我将一个函数传递给route的组件prop时才会发生这种情况，如}