詳解React開發(fā)中使用require.ensure()按需加載ES6組件
更新時(shí)間：2017年05月12日 14:08:13 作者：Monkey_suo
本篇文章主要介紹了詳解React開發(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方式書寫的組件底部增加一句：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>你好，祝你幸福，再見~</div>
)
}
}
module.exports= Hello；
因?yàn)樵?code>require.ensure()中使用了require()引入模塊，所以組件后必須用module.exports導(dǎo)出組件；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法
- react build 后打包發(fā)布總結(jié)
- ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號(hào)操作
- React+Ant Design開發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
- react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼
- React降級(jí)配置及Ant Design配置詳解
- 詳解Ant Design of React的安裝和使用方法
- React使用UI(Ant?Design)框架的詳細(xì)過程
相關(guān)文章
react-native-video實(shí)現(xiàn)視頻全屏播放的方法
這篇文章主要介紹了react-native-video實(shí)現(xiàn)視頻全屏播放的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
react將文件轉(zhuǎn)為base64上傳的示例代碼
本文主要介紹了react將文件轉(zhuǎn)為base64上傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
關(guān)于hooks中useEffect()的使用總結(jié)
這篇文章主要介紹了關(guān)于hooks中useEffect()的使用總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React中react-redux和路由詳解，redux早期被設(shè)計(jì)成可以在各個(gè)框架中使用，因此在不同的框架中使用的時(shí)候，要引入相應(yīng)的插件，感興趣的朋友可以繼續(xù)學(xué)習(xí)下面文章2022-08-08
這篇文章主要為大家介紹了styled-components?的性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了react如何添加less環(huán)境配置，本文給大家分享遇到問題及解決方案，結(jié)合示例代碼圖文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
react實(shí)現(xiàn)頁(yè)面水印效果的全過程
大家常常關(guān)注的是網(wǎng)站圖片增加水印,而很少關(guān)注頁(yè)面水印,其實(shí)這個(gè)需求也是比較常見的,比如公文系統(tǒng)、合同系統(tǒng)等,這篇文章主要給大家介紹了關(guān)于react實(shí)現(xiàn)頁(yè)面水印效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03