React-Router-父组件状态更改时组件重新加载？

Question

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

它的状态为mobileOpen

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>

路由中的CurrenciesComponent定义如下：

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

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

如果我按照以下方式定义路线（不将道具传递给Currencies组件），则不会发生：

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

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

Answer 1

我通过使用render而不是component prop来解决此问题：

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

Answer 2

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

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

由于您要做的只是要求它不渲染道具是否相同，因此您可以使用PureComponent而不是Component。 PureComponent实现了shouldComponentUpdate ，除非shouldComponentUpdate或状态发生了变化，否则不会更新。