1

我正在使用 Ionic 框架来构建一个反应应用程序。在我的组件树的最顶端是一个 IonReactRouter。

现在我需要在路由之间传递数据，并且必须仔细设计应该渲染哪个组件。所以我添加了日志代码，惊讶地看到许多意想不到的渲染。似乎 Ionic 路由器从不卸载 Route 并且在屏幕外的组件上浪费渲染。

要重现该行为，请使用以下代码创建一个示例 Ionic 应用程序（这是 sidemenu 模板）：

ionic start --start-id SpOfzzZnR

并向页面渲染添加一些日志记录：

console.log('rendered '+name +" at " +new Date().getUTCSeconds());

这个例子的关键部分是一个带有菜单和路由器的应用程序：

<IonApp>
  <IonReactRouter>
    <IonSplitPane contentId="main">
      <Menu />
      <IonRouterOutlet id="main">
        <Route path="/page/:name" component={Page} exact />
        <Redirect from="/" to="/page/Inbox" exact />
      </IonRouterOutlet>
    </IonSplitPane>
  </IonReactRouter>
</IonApp>

以及从路由参数读取其名称的页面：

const Page: React.FC = () => {

  const { name } = useParams<{ name: string; }>();
  console.log('rendered '+name +" at " +new Date().getUTCSeconds());

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>{name}</IonTitle>
        </IonToolbar>
      </IonHeader>
    </IonPage>
  );

在路由之间切换时，它总是同时渲染旧路由和新路由：

rendered Trash at 46 Page.tsx:10 # currently viewing Trash, clicked on Spam
rendered Spam at 46 Page.tsx:10
rendered Spam at 48 Page.tsx:10 # currently viewing Spam, clicked on Trash
rendered Trash at 48 Page.tsx:10

为什么这样做？

4

0 回答 0