快捷導(dǎo)航

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

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

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

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

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

如果想要?jiǎng)討B(tài)加載出es6代碼組件，直接require一個(gè)es6風(fēng)格的組件是不行的，因?yàn)橐话愕恼Z(yǔ)言編譯工具（如babel）,不支持直接require一個(gè)es6風(fēng)格的組件。

那么有種辦法可以解決：在es6方式書(shū)寫(xiě)的組件底部增加一句：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} >
          點(diǎn)擊后，按需加載模塊~
        </span>
        {this.state.currentComponent}
      </div>
    )
  }
}

app2

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


module.exports= Hello；

因?yàn)樵?code>require.ensure()中使用了require()引入模塊，所以組件后必須用module.exports導(dǎo)出組件；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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