react開(kāi)發(fā)中如何使用require.ensure加載es6風(fēng)格的組件
其實(shí)用的babel，在瀏覽器端就應(yīng)該可以加載，之前少了個(gè)default：
require.ensure([],(require) => {
let A = require('./a.js').default;
})
以下方式也可以，但是比較low，可以作廢了：
1、問(wèn)題提出：想通過(guò)require.ensure加載es6風(fēng)格的模塊？
2、出現(xiàn)問(wèn)題：import方式本身就是靜態(tài)設(shè)計(jì)方式。如果require進(jìn)來(lái)的是commonjs模塊或者amd則沒(méi)問(wèn)題，但項(xiàng)目只想es6一個(gè)書(shū)寫(xiě)風(fēng)格，行嗎？
遺憾的是：一般語(yǔ)言編譯工具（如babel)，不支持直接require一個(gè)es6風(fēng)格的React組件。
怎么辦？？
3、react代碼分割方式：
react代碼分割常見(jiàn)使用router方式，但是單頁(yè)面應(yīng)用，不打算router下，可以用require.ensure進(jìn)行按需加載
react的api在此：https://webpack.github.io/docs/code-splitting.html
文檔中并沒(méi)有實(shí)例，而且現(xiàn)階段，大部分程序已經(jīng)完全按照es6風(fēng)格的代碼。
那么怎樣讓es6模塊也能通過(guò)require呢?
先看結(jié)論：在es6方式書(shū)寫(xiě)的模塊底部增加一句module.exports=yourclassName
例如：module.exports = Hello;
4、代碼舉例：
1）Container模塊如下：
import React, {Component} from 'react';
export default class Container extends Component {
constructor() {
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} style={{border: "1px solid #000"}}>點(diǎn)擊后，按需加載如下模塊</span>
{this.state.currentComponent}
</div>
)
}
}
2）app2模塊如下
注意：在es6方式寫(xiě)的模塊的最底下增加一句：module.exports = Hello;即可
或者app2直接按照commonjs規(guī)范或者是amd、cmd規(guī)范書(shū)寫(xiě)也成。
import React from 'react'
export default class Hello extends React.Component {
render(){
return (
<div>Hello</div>
)
}
}
//warning:這一句必須加上,因?yàn)樵趓equire.ensure中使用了require引入模塊
module.exports = Hello;
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React Native實(shí)現(xiàn)進(jìn)度條彈框的示例代碼
本篇文章主要介紹了React Native實(shí)現(xiàn)進(jìn)度條彈框的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了使用ES6語(yǔ)法重構(gòu)React代碼詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
React+Typescript創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
通過(guò)React組件庫(kù)和TypeScript的強(qiáng)類(lèi)型特性,開(kāi)發(fā)者可以創(chuàng)建出具有優(yōu)秀用戶體驗(yàn)和穩(wěn)定性的Web應(yīng)用程序,本文主要介紹了React+Typescript創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下2023-08-08
react antd checkbox實(shí)現(xiàn)全選、多選功能
目前好像只有table組件有實(shí)現(xiàn)表格數(shù)據(jù)的全選功能,如果說(shuō)對(duì)于list,card,collapse等其他組件來(lái)說(shuō),需要自己結(jié)合checkbox來(lái)手動(dòng)實(shí)現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實(shí)現(xiàn)全選、多選功能,需要的朋友可以參考下2024-07-07
淺談React + Webpack 構(gòu)建打包優(yōu)化
本篇文章主要介紹了淺談React + Webpack 構(gòu)建打包優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
React Native:react-native-code-push報(bào)錯(cuò)的解決
這篇文章主要介紹了React Native:react-native-code-push報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
React.memo 和 useMemo 的使用問(wèn)題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁(yè)面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁(yè)面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問(wèn)題小結(jié),需要的朋友可以參考下2022-11-11
react中ref獲取dom或者組件的實(shí)現(xiàn)方法
這篇文章主要介紹了react中ref獲取dom或者組件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Jira 任務(wù)管理系統(tǒng)項(xiàng)目總結(jié)講解
這篇文章主要為大家介紹了Jira 任務(wù)管理系統(tǒng)項(xiàng)目總結(jié)講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09