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} />

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

Answer 1

我使用render代替component道具解决了我的路线问题：

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

Answer 2

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

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

由于你所做的就是要求它不要渲染，如果道具保持不变，你可以使用PureComponent而不是组件。 PureComponent实现shouldComponentUpdate并且除非道具或状态发生变化，否则不会更新。

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

2 个答案: