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

更新时间：2017年05月12日 14:08:13 作者：Monkey_suo

本篇文章主要介绍了详解React开发中使用require.ensure()按需加载ES6组件，非常具有实用价值，需要的朋友可以参考下

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

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导出组件；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React Native模块之Permissions权限申请的实例相机
这篇文章主要介绍了React Native模块之Permissions权限申请的实例相机的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
详解如何使用React和MUI创建多选Checkbox树组件
这篇文章主要为大家详细介绍了如何使用 React 和 MUI（Material-UI）库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下
2024-01-01
从头写React-like框架的工程搭建实现
这篇文章主要介绍了从头写React-like框架的工程搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
浅谈React 属性和状态的一些总结
下面小编就为大家带来一篇浅谈React 属性和状态的一些总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
React 实现表单组件的示例代码
本文主要介绍了React 实现表单组件的示例代码,支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能,具有一定的参考价值,感兴趣的可以了解一下
2024-07-07
JavaScript中rem布局在react中的应用
这篇文章主要介绍了JavaScript中rem布局在react中的应用的相关资料,需要的朋友可以参考下
2015-12-12
react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom
这篇文章主要介绍了react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
React和Vue组件更新的实现及区别
React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式,本文将从React和Vue的组件更新原理入手,剖析两者虚拟DOM difer算法的异同点,具有一定的参考价值,感兴趣的可以了解一下
2024-02-02
React自定义hook的方法
Hook是 React 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下，可以拥有class组件的状态、生命周期、引用等功能，这篇文章主要介绍了React自定义hook的相关知识,需要的朋友可以参考下
2022-06-06
在react中使用vue的状态管理的方法示例
这篇文章主要介绍了在react中使用vue的状态管理的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具