React 懒加载组件
2017-01-12 20:49
155 查看
//组件第一次初始化的时候加载.
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.js加载组件以及JSX脚本处理代码
- ant-design在create-react-app中配置按需加载组件
- 好用的ReactNative下拉刷新上拉加载的组件,支持iOS和Android
- React第三方组件1(路由管理之Router的使用④按需加载-上)
- react开发中如何使用require.ensure加载es6风格的组件
- React Native中加载指示器组件ActivityIndicator使用方法
- Webpack懒加载React Router的页面组件
- react-native 自定义 下拉刷新 / 上拉加载更多 组件
- React router动态加载组件之适配器模式的应用详解
- react-native之上拉加载,下拉刷新组件封装
- react---react router4.0路由中如何异步动态加载组件,webpack使用require.ensure()生成异步chunk
- react开发中如何使用require.ensure加载es6风格的组件
- React第三方组件1(路由管理之Router的使用⑤按需加载-下)
- React 组件图片库的延迟加载
- 关于在reactjs项目中如何用webpack配置组件按需加载
- React-Native ListView加载图片淡入淡出效果的组件
- 关于ie中easyui form组件load事件无法多次加载数据
- webservice 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下运行,将出现此问题
- React Native组件之Button
- react组件是怎么来的