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

Question

在我的 React 应用程序中，我有一个来自 material-ui's 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 调用需要几秒钟才能完成，所以我想避免这种情况）。

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

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

那么如何在指定路由的同时避免重新渲染并为 Currencies 提供 props 呢？

Answer 1

我通过使用 render 而不是 component 属性解决了这个问题：

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

Answer 2

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

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

由于您所做的只是要求它在道具保持不变的情况下不渲染，因此您可以使用PureComponent 而不是 Component。 PureComponent 实现了shouldComponentUpdate，除非 props 或 state 发生变化，否则不会更新。