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

Posted 2023-02-22

【中文标题】React-router - 组件在父组件状态更改时重新加载？

【英文标题】：React-router - component reloads on parent component state change?

【发布时间】：2018-06-15 13:40:02

【问题描述】：

在我的 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 呢？

【参考方案1】：

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

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

【参考方案2】：

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

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

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

【讨论】：

我认为这与子组件的生命周期无关。原因是，在我的第一个示例中调用了 Currencies 组件的构造函数。因此，无论 shouldComponentUpdate 如何，它都会更新。

构造函数被调用了两次？一次加载，一次打开抽屉？

没错，但只有当我像<Route exact path="/currencies" component=() => ( <Currencies /> )那样将函数传递给路由的组件道具时才会发生这种情况@