[英]React-router - component reloads on parent component state change?
In my React app, I have a ResponsiveDrawer component taken from material-ui's demo . 在我的React应用程序中,我有一个取自material-ui的demo的ResponsiveDrawer组件。 It's basically just a React component which renders a drawer with a list of menu items, a title bar and content frame.
它基本上只是一个React组件,它呈现一个带有菜单项列表,标题栏和内容框架的抽屉。
It has mobileOpen
in its state 它的状态为
mobileOpen
state = {
mobileOpen: false
};
which changes when user clicks the hamburger icon 当用户单击汉堡包图标时,它会更改
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>
I also have set up some routes inside the content of the ResponsiveDrawer: 我还在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 from the route is defined as follows: 路由中的CurrenciesComponent定义如下:
const CurrenciesComponent = () => (
<Currencies isSignedIn={this.isSignedIn} />
);
When I click the hamburger icon, the state of ResponsiveDrawer changes, however the CurrenciesComponent is also reloaded (I have an API call there which takes a few seconds to complete so I would like to avoid this). 当我单击汉堡包图标时,ResponsiveDrawer的状态发生变化,但是CurrenciesComponent也被重新加载(我在那里有一个API调用,该调用需要几秒钟才能完成,所以我想避免这种情况)。
If I define my route as follows (without passing the props to Currencies component), this doesn't happen: 如果我按照以下方式定义路线(不将道具传递给Currencies组件),则不会发生:
<Route exact path="/currencies" component={Currencies} />
So how do I avoid the re-render and provide props to Currencies at the same time when specifying the route? 那么在指定路线时如何避免重新渲染并同时为货币提供道具?
我通过使用render
而不是component
prop来解决此问题:
<Route exact path="/currencies" render={CurrenciesComponent}/>
You can tell your component if it should update. 您可以告诉组件是否应该更新。
As part of React's lifecycle, each component has the method shouldComponentUpdate
that gets run each time it gets a signal to update. 作为React生命周期的一部分,每个组件都有方法
shouldComponentUpdate
,该方法在每次收到更新信号时都会运行。 Returning true from this function will tell the component to update and false will tell it not to. 从此函数返回true将指示组件进行更新,而false将指示其不进行更新。
Since all you're doing is asking it not to render if the props remain the same, you may be able to use PureComponent instead of Component. 由于您要做的只是要求它不渲染道具是否相同,因此您可以使用PureComponent而不是Component。 PureComponent implements
shouldComponentUpdate
and doesn't update unless props or state has changed. PureComponent实现了
shouldComponentUpdate
,除非shouldComponentUpdate
或状态发生了变化,否则不会更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.