详解React开发中使用require.ensure()按需加载ES6组件


Posted in Javascript onMay 12, 2017

首先介绍下动态加载函数:

require.ensure([], (require)=>{
  let A = require('./a.js').default;
})

如果想要动态加载出es6代码组件,直接require一个es6风格的组件是不行的,因为一般的语言编译工具(如babel),不支持直接require一个es6风格的组件。

那么有种办法可以解决:在es6方式书写的组件底部增加一句:module.exports = YouclassName;

import React, {Component} from 'react';

export default class Father extends Component {
  constructor (props)=>{
    super();
    this.state = {
      currentComponent:null
    }
  }

  doSomething = () => {
    require.ensure(['./app2'], (require) => {
      const Comp = require('./app2');
      this.setState({
        currentComponent:<Comp />
      })
    })
  }

  render () {
    return (
      <div>
        <span onClick={this.doSomething} >
          点击后,按需加载模块~
        </span>
        {this.state.currentComponent}
      </div>
    )
  }
}

app2

import React,{Component} from 'react';
export default class Hello extends Component {
  render () {
    return (
      <div>你好,祝你幸福,再见~</div>
    )
  }
}


module.exports= Hello;

因为在require.ensure()中使用了require()引入模块,所以组件后必须用module.exports导出组件;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
fastadmin中调用js的方法
May 14 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 #Javascript
JS常用正则表达式总结【经典】
May 12 #Javascript
vue.js的安装方法
May 12 #Javascript
JS匹配日期和时间的正则表达式示例
May 12 #Javascript
js如何获取网页所有图片
May 12 #Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 #Javascript
jQuery手风琴的简单制作
May 12 #jQuery
You might like
PHP 中文处理技巧
2010/04/25 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python实现学生管理系统
2018/01/11 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
django实现用户注册实例讲解
2019/10/30 Python
python 实现两个线程交替执行
2020/05/02 Python
python批量修改文件名的示例
2020/09/27 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
.net面试题
2015/12/22 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
大家检讨书5000字
2014/02/03 职场文书
车辆转让协议书
2014/09/24 职场文书
工伤事故证明
2014/10/20 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS