React Component 渲染 5 次，Ionic 4

Question

我正在开发一个带有仪表板的应用程序来显示一些数据。我可以在chrome的控制台上看到render方法被调用了5次，应用页面显示了一个非常烦人的重新渲染效果。如何避免多次调用渲染方法以及烦人的重新渲染/弹跳效果？我正在加载仪表板页面。

Chrome 控制台：

App.tsx：

<IonApp>
    <IonReactRouter>
      <SideMenu></SideMenu>
      <IonPage id="main">
        <IonTabs>
          <IonRouterOutlet id="main">
            <Switch>
              <Route exact path="/login" render={(props) => <Login {...props} />} />
              <PrivateRoute path="/dashboard" component={Dashboard} />
              <PrivateRoute path="/list/:status" component={List} />
              <PrivateRoute path="/detail/:id" component={Detail} />
              <Redirect from="/" to="/dashboard"></Redirect>
              <Route component={NotFound} />
            </Switch>
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tabnew" href="/addnew">
              <IonIcon icon={add} />
              <IonLabel>Add an Item</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonPage>
    </IonReactRouter>
  </IonApp>

私人路线：

interface PrivateRouteProps extends RouteProps {
    component: any
}

const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({ component: Component, ...rest }) => (

    <Route {...rest} render={(props) => {
        const currentUser: string | null  =  localStorage.getItem("jwt");

        if (!currentUser) {
            return <Redirect to={{ pathname: '/login' }} />
        }

        console.log('PrivateRoute returns Component');
        return <Component {...props} />
    }} />
);

export default PrivateRoute;

仪表板：

type Props = {};
type PropsType = RouteComponentProps<Props>

type State = {
  dashboard: {
    borrowed: string,
    stored: string,
    available: string,
    lost: string,
    busted: string,
  },
  error: string
};
class Dashboard extends PureComponent <PropsType, State> {  

  constructor (props: PropsType) {
    super(props)
    this.state = {
      dashboard: {
        borrowed: "4",
        stored: "6",
        available: "2",
        lost: "3",
        busted: "1",
      },
      error: ''
    }
  }

  componentDidMount() {
    console.log("Dashboard ComponentDidMount")
  }

  render() {
    console.log("Render");
    var availableClass= "dashboard-elem dashboard-number " + (this.state.dashboard.available === "0" ?  "text-success" : "text-warning");
    var lostClass  = "dashboard-elem dashboard-number " + (this.state.dashboard.lost=== "0" ?  "text-success" : "text-danger" );
    var bustedClass = "dashboard-elem dashboard-number " + (this.state.dashboard.busted  === "0" ?  "text-success" : "text-danger" );

    return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton autoHide={false}></IonMenuButton>
          </IonButtons>
          <IonTitle>
            <div className="header-logo">
              <img src="/assets/img/logo.png" alt="logo"></img>
            </div>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardContent>
            <IonSearchbar searchIcon="search" showCancelButton="always" value="Search your container"></IonSearchbar>
          </IonCardContent>
          <IonCardContent className="font-weight-bold">
            <IonCard className="card-body" href="/list/borrowed">
              <div className="dashboard-elem">Borrowed:</div>
              <div className="dashboard-elem text-success dashboard-number">{this.state.dashboard.borrowed}</div>
            </IonCard>
            <IonCard className="card-body">
              <div className="dashboard-elem">Stored:</div>
              <div className="dashboard-elem text-success dashboard-number">{this.state.dashboard.stored}</div>
            </IonCard>
            <IonCard className="card-body">
              <div className="dashboard-elem">Available:</div>
              <div className={availableClass}>{this.state.dashboard.available}</div>
            </IonCard>
            <IonCard className="card-body">
              <div className="dashboard-elem">Lost:</div>
              <div className={lostClass}>{this.state.dashboard.lost}</div>
            </IonCard>
            <IonCard className="card-body">
              <div className="dashboard-elem">Busted:</div>
              <div className={bustedClass}>{this.state.dashboard.busted}</div>
            </IonCard>
          </IonCardContent>
        </IonCard>
      </IonContent>
    </IonPage>
  )};
};

export default withRouter(Dashboard);

Answer 1

通过删除 <IonRouterOutlet> 并仅使用 React 的 <Switch> 解决了问题。根据 Ionic 的文档，IonRouterOutlet 只能在 Angular 应用程序中使用。