//组件第一次初始化的时候加载.
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 懒加载组件的更多相关文章

  1. 【react懒加载组件】--react-lazyload

    组件安装: npm install react-lazyload --save-dev 组件使用: //引入 import LazyLoad from 'react-lazyload'; //rend ...

  2. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  3. 带加载进度的Web图片懒加载组件Lazyload

    在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...

  4. vue-cli按需加载,懒加载组件

    vue来做一个单页面应用,当我们的项目越来越大,组件越来越多的时候,首次启动项目户特别慢,就算做一个加载框,蒙层之类的,体验也不会好,这个时候就需要按需加载 1.什么叫按需加载 所谓按需加载,顾名思义 ...

  5. react异步加载组件

    1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...

  6. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  7. vue2组件懒加载浅析

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  8. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  9. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

随机推荐

  1. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  2. Windows 2008 R2环境下DHCP服务的安装部署使用

    (第一版本) 这个实验好像需要在部署了activity directory服务的基础上的,给个直达链接 http://blog.csdn.net/qq_34829953/article/details ...

  3. elasticsearch技术解析与实战(一) 入门和索引

    GET _cat/nodes GET _cat/health GET _cat/shards GET http://10.37.84.124:9200/secisland?pretty { " ...

  4. graalvm 简单试用

      安装 地址 http://www.graalvm.org/downloads/ 配置环境变量 linux: export PATH=/path/to/graalvm/bin:$PATH mac: ...

  5. IBM WebSphere MQ介绍安装以及配置服务详解

    首先介绍一下MQ MQ消息队列的简称是一种应用程序对应用程序的通信方法.说白了也就是通过队列的方式来对应用程序进行数据通信.而无需专用链接来链接它们. MQ的通讯方式 1.数据报的方式 Datagra ...

  6. 晒一晒Jenkins那些常用插件

      Jenkins插件大师 作为CI/CD的调度中心,Jenkins具有十八般武艺,目前已有1700多个插件,功能强大到似乎有点过分了.本文主要列出平时我们常用的插件. 以下这两个网站是Jenkins ...

  7. 使用yum更新时不升级Linux内核的方法

    RedHat/CentOS/Fedora使用 yum update 更新时,默认会 升级内核 .但有些服务器硬件(特别是组装的机器)在升级内核后,新的内核可能会认不出某些硬件,要重新安装驱动,很麻烦. ...

  8. 关于meshgrid和numpy.c_以及numpy.r_

    meshgrid的目的是生成两套行列数一致的矩阵,其中一个是行重复,一个是列复制:可以这么来理解,通过ravel()将矩阵数据拉平之后,就可以将这两套矩阵累加在一起,形成一个两行数据,要达到这个效果是 ...

  9. [C++]String::find

    一.定义 string (1) size_t find (const string& str, size_t pos = 0) const; c-string (2) size_t find ...

  10. C#中四种常用集合的运用(非常重要)【转】

    1.ArrayList ArrayList类似于数组,有人也称它为数组列表.ArrayList可以动态维护,而数组的容量是固定的. 它的索引会根据程序的扩展而重新进行分配和调整.和数组类似,它所存储的 ...