javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 01:03:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): first render performance improvements

Browse Source
This commit is contained in:
Ely Lucas
2019-12-09 14:36:47 -07:00
committed by Ely Lucas
parent b8517781b1
commit 43712db1be
11 changed files with 160 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/react-router/src/ReactRouter/StackManager.tsx
View File

@ -13,13 +13,10 @@ interface StackManagerProps {
children?: React.ReactNode;
}
interface StackManagerState {
routerOutletReady: boolean;
}
interface StackManagerState { }
class StackManagerInner extends React.Component<StackManagerProps, StackManagerState> {
routerOutletEl: React.RefObject<HTMLIonRouterOutletElement> = React.createRef();
id: string;
constructor(props: StackManagerProps) {
@ -27,18 +24,11 @@ class StackManagerInner extends React.Component<StackManagerProps, StackManagerS
this.id = this.props.id || generateId();
this.handleViewSync = this.handleViewSync.bind(this);
this.handleHideView = this.handleHideView.bind(this);
this.state = {
routerOutletReady: false
};
this.state = {};
}
componentDidMount() {
this.props.routeManager.setupIonRouter(this.id, this.props.children, this.routerOutletEl.current!);
this.routerOutletEl.current!.addEventListener('routerOutletReady', () => {
this.setState({
routerOutletReady: true
});
});
}
static getDerivedStateFromProps(props: StackManagerProps, state: StackManagerState) {
@ -70,9 +60,7 @@ class StackManagerInner extends React.Component<StackManagerProps, StackManagerS
const viewStack = routeManager.viewStacks.get(this.id);
const views = (viewStack || { views: [] }).views.filter(x => x.show);
const ionRouterOutlet = React.Children.only(this.props.children) as React.ReactElement;
const { routerOutletReady } = this.state;
const childElements = routerOutletReady ? views.map(view => {
const childElements = views.map(view => {
const route = routeManager.getRoute(view.routeId);
return (
<ViewTransitionManager
@ -90,7 +78,7 @@ class StackManagerInner extends React.Component<StackManagerProps, StackManagerS
</View>
</ViewTransitionManager>
);
}) : <div></div>;
});
const elementProps: any = {
ref: this.routerOutletEl