fix(react): first render performance improvements

ionic-team · Dec 9, 2019 · 1c7d1e5 · 1c7d1e5
1 parent 684293d
commit 1c7d1e5
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 174 deletions.
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
@@ -176,38 +176,34 @@ will match the following tab:
 ### React
 
 ```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
+
 export const TabsExample: React.FC = () => (
-<IonTabs>
-  <IonRouterOutlet>
-    <Redirect exact path="/" to="/tabs/schedule" />
-    {/* 
-      Using the render method prop cuts down the number of renders your components will have due to route changes.
-      Use the component prop when your component depends on the RouterComponentProps passed in automatically.        
-    */}
-    <Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
-    <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
-    <Route path="/tabs/map" render={() => <MapView />} exact={true} />
-    <Route path="/tabs/about" render={() => <About />} exact={true} />
-  </IonRouterOutlet>
-  <IonTabBar slot="bottom">
-    <IonTabButton tab="schedule" href="/tabs/schedule">
-      <IonIcon icon={calendar} />
-      <IonLabel>Schedule</IonLabel>
-    </IonTabButton>
-    <IonTabButton tab="speakers" href="/tabs/speakers">
-      <IonIcon icon={contacts} />
-      <IonLabel>Speakers</IonLabel>
-    </IonTabButton>
-    <IonTabButton tab="map" href="/tabs/map">
-      <IonIcon icon={map} />
-      <IonLabel>Map</IonLabel>
-    </IonTabButton>
-    <IonTabButton tab="about" href="/tabs/about">
-      <IonIcon icon={informationCircle} />
-      <IonLabel>About</IonLabel>
-    </IonTabButton>
-  </IonTabBar>
-</IonTabs>
+  <IonTabs>
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="schedule">
+        <IonIcon name="calendar" />
+        <IonLabel>Schedule</IonLabel>
+        <IonBadge>6</IonBadge>
+      </IonTabButton>
+
+      <IonTabButton tab="speakers">
+        <IonIcon name="contacts" />
+        <IonLabel>Speakers</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="map">
+        <IonIcon name="map" />
+        <IonLabel>Map</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="about">
+        <IonIcon name="information-circle" />
+        <IonLabel>About</IonLabel>
+      </IonTabButton>
+    </IonTabBar>
+  </IonTabs>
 );
 ```
 

diff --git a/packages/react-router/src/ReactRouter/IonRouteAction.ts b/packages/react-router/src/ReactRouter/IonRouteAction.ts
@@ -0,0 +1 @@
+export type IonRouteAction = 'push' | 'replace' | 'pop';
diff --git a/packages/react-router/src/ReactRouter/NavManager.tsx b/packages/react-router/src/ReactRouter/NavManager.tsx
@@ -4,11 +4,12 @@ import { Location as HistoryLocation, UnregisterCallback } from 'history';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
+import { IonRouteAction } from './IonRouteAction';
 import { StackManager } from './StackManager';
 
 interface NavManagerProps extends RouteComponentProps {
   onNavigateBack: (defaultHref?: string) => void;
-  onNavigate: (type: 'push' | 'replace', path: string, state?: any) => void;
+  onNavigate: (type: 'push' | 'replace' | 'pop', path: string, state?: any) => void;
 }
 
 export class NavManager extends React.Component<NavManagerProps, NavContextState> {
@@ -24,7 +25,7 @@ export class NavManager extends React.Component<NavManagerProps, NavContextState
       getStackManager: this.getStackManager.bind(this),
       getPageManager: this.getPageManager.bind(this),
       currentPath: this.props.location.pathname,
-      registerIonPage: () => { return; }, // overridden in View for each IonPage
+      registerIonPage: () => { return; } // overridden in View for each IonPage
     };
 
     this.listenUnregisterCallback = this.props.history.listen((location: HistoryLocation) => {
@@ -52,8 +53,8 @@ export class NavManager extends React.Component<NavManagerProps, NavContextState
     this.props.onNavigateBack(defaultHref);
   }
 
-  navigate(path: string, direction?: RouterDirection | 'none', type: 'push' | 'replace' = 'push') {
-    this.props.onNavigate(type, path, direction);
+  navigate(path: string, direction?: RouterDirection | 'none', ionRouteAction: IonRouteAction = 'push') {
+    this.props.onNavigate(ionRouteAction, path, direction);
   }
 
   getPageManager() {