详解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 相关文章推荐
js实现单一html页面两套css切换代码
Apr 11 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
详解webpack打包vue时提取css
May 26 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
Angular之jwt令牌身份验证的实现
Feb 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
基于python实现百度翻译功能
2019/05/09 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
致100米运动员广播稿
2014/02/14 职场文书
应届生自荐书
2014/06/23 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
学校党员对照检查材料
2014/08/28 职场文书
家庭贫困证明
2014/09/23 职场文书
学籍证明模板
2014/11/21 职场文书
护士求职简历自我评价
2015/03/10 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python