React 懶載入組件

標籤：color   man   ase   var   html   create   inf   xtend   account   

 

 

 //組件第一次初始化的時候載入.

 

import React, {PropTypes} from ‘react‘;//import AppComposer from ‘./views/App/AppComposer‘;//import LoginComposer from ‘./views/Login/LoginComposer‘;//import HomeComposer from ‘./views/Home/HomeComposer‘;//import WatchListComposer from ‘./views/WatchList/WatchListComposer‘;//import SystemLogComposer from ‘./views/SystemLog/SystemLogComposer‘;//import TeamManageComposer from ‘./views/TeamManage/TeamManageComposer‘;//import {UserQueryPage} from ‘./views/UserQuery/UserQueryComposer‘;//import ClosedCaseComposer from ‘./views/ClosedCase/ClosedCaseComposer‘;//import AccountInfoComposer from ‘./views/AccountInfo/AccountInfoComposer‘;function createLazyLoadComponent(doLoadComponent){    return class newClassComponent extends React.Component{        constructor(){            super(...arguments);            this.state = {                RealComponent : null            };        }        componentDidMount(){            //組件第一次初始化的時候載入.            doLoadComponent((pageComponent)=>{                this.setState({                    RealComponent:pageComponent                });            });        }        render(){            var {RealComponent} = this.state;            var props = this.props;            if (RealComponent){                return <RealComponent {...props} />            }            return <div>loading...</div>        }    }}export const LoginComposer = createLazyLoadComponent((onLoadCallback)=>{     require([‘./views/Login/LoginComposer‘], onLoadCallback);});export const HomeComposer = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/Home/HomeComposer‘], onLoadCallback);});export const WatchListComposer = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/WatchList/WatchListComposer‘], onLoadCallback);});export const SystemLogComposer = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/SystemLog/SystemLogComposer‘], onLoadCallback);});export const TeamManageComposer = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/TeamManage/TeamManageComposer‘], onLoadCallback);});export const ClosedCaseComposer = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/ClosedCase/ClosedCaseComposer‘], onLoadCallback);});export const AccountInfoComposer = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/AccountInfo/AccountInfoComposer‘], onLoadCallback);});export const UserQueryPage = createLazyLoadComponent((onLoadCallback)=>{    require([‘./views/UserQuery/UserQueryComposer‘], ({UserQueryPage})=>{        onLoadCallback(UserQueryPage);    });});

 

React 懶載入組件