Ioni c часто рендерит страницы - PullRequest
Новая
       4

Ioni c часто рендерит страницы

0 голосов
/ 25 января 2020

Я создал IONI c Реагирует на пустой шаблон. На домашней странице я создал еще один компонент с именем DetailPage. Первая строка в обоих компонентах - console.log, потому что я хочу знать, как часто рендерится.

Начальная загрузка Home выходов страницы

enter image description here

Когда я нажимаю IonItem со страницы Home Я вижу

enter image description here

И когда я использую IonBackButton страницы DetailPage, это выглядит как

enter image description here

Я ожидал следующего: Home

Home 1x

Home -> DetailPage

Home 1x
DetailPage 1x

DetailPage -> Home

Home 1x
DetailPage 1x
Home 1x

Нормально ли, чтобы страница ioni c отображалась так часто. Если возможно, как я могу это исправить?

Мой код:

App.tsx

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home, { DetailPage } from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" render={() => <Home />} exact={true} />
        <Route path="/home/detailpage" component={DetailPage} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

Home.tsx

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButtons,
  IonImg,
  IonThumbnail,
  IonList,
  IonItem,
  IonLabel,
  IonBackButton
} from '@ionic/react';

import React from 'react';

const Home: React.FC = () => {
  console.log('Home');

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Master</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonList>
          <IonItem routerLink="/home/detailpage" routerDirection="forward" detail>
            <IonThumbnail slot="start">
              <IonImg src="https://via.placeholder.com/80" />
            </IonThumbnail>
            <IonLabel>Item 1</IonLabel>
          </IonItem>
          <IonItem routerLink="/home/detailpage" routerDirection="forward" detail>
            <IonThumbnail slot="start">
              <IonImg src="https://via.placeholder.com/80" />
            </IonThumbnail>
            <IonLabel>Item 1</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};



export const DetailPage: React.FC = () => {
  console.log('DetailPage');

  return (
    <IonPage>
      <IonContent>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start">
              <IonBackButton defaultHref="/home" />
            </IonButtons>
            <IonTitle>Detail</IonTitle>
          </IonToolbar>
        </IonHeader>
      </IonContent>
    </IonPage>
  );
};


export default Home;
...