快捷導航

詳解React開發(fā)中使用require.ensure()按需加載ES6組件

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

本篇文章主要介紹了詳解React開發(fā)中使用require.ensure()按需加載ES6組件，非常具有實用價值，需要的朋友可以參考下

首先介紹下動態(tài)加載函數(shù)：

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

如果想要動態(tài)加載出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導出組件；

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React Native模塊之Permissions權(quán)限申請的實例相機
這篇文章主要介紹了React Native模塊之Permissions權(quán)限申請的實例相機的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09
詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件
這篇文章主要為大家詳細介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個多選 Checkbox 樹組件,該組件可以用于展示樹形結(jié)構(gòu)的數(shù)據(jù),并允許用戶選擇多個節(jié)點,感興趣的可以了解下
2024-01-01
從頭寫React-like框架的工程搭建實現(xiàn)
這篇文章主要介紹了從頭寫React-like框架的工程搭建實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
淺談React 屬性和狀態(tài)的一些總結(jié)
下面小編就為大家?guī)硪黄獪\談React 屬性和狀態(tài)的一些總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
React 實現(xiàn)表單組件的示例代碼
本文主要介紹了React 實現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗證,錯誤信息展示,表單提交,動態(tài)表單元素等功能,具有一定的參考價值,感興趣的可以了解一下
2024-07-07
JavaScript中rem布局在react中的應(yīng)用
這篇文章主要介紹了JavaScript中rem布局在react中的應(yīng)用的相關(guān)資料,需要的朋友可以參考下
2015-12-12
react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom
這篇文章主要介紹了react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-10-10
React和Vue組件更新的實現(xiàn)及區(qū)別
React 和 Vue 都是當今最流行的前端框架,它們都實現(xiàn)了組件化開發(fā)模式,本文將從React和Vue的組件更新原理入手,剖析兩者虛擬DOM difer算法的異同點,具有一定的參考價值,感興趣的可以了解一下
2024-02-02
React自定義hook的方法
Hook是 React 16.8 的新增特性。它通常與函數(shù)式組件同時使用?？梢允购瘮?shù)式組件在不編寫 class 的情況下，可以擁有class組件的狀態(tài)、生命周期、引用等功能，這篇文章主要介紹了React自定義hook的相關(guān)知識,需要的朋友可以參考下
2022-06-06
在react中使用vue的狀態(tài)管理的方法示例
這篇文章主要介紹了在react中使用vue的狀態(tài)管理的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05