好看的小说完本推荐,盗墓笔记小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

export和exportdefault的示例分析

小編給大家分享一下export和export default的示例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)致力于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。選擇創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

網(wǎng)上有很多關(guān)于export和export default的文章，他們大部門都是只講了用法，但是沒有提到性能，打包等關(guān)鍵的東西。
大家應(yīng)該應(yīng)該能理解import * from 'xxx'會(huì)把文件中export default的內(nèi)容都打包到文件中，而import {func} from 'xxx' 只會(huì)把文件中的func導(dǎo)入，這樣勢(shì)必export會(huì)比export default打包的少?？蠢?/p>

utils.js

const func1 = () => {
    console.log('func1');
}

const func2 = () => {
    console.log('func2');
}

export default {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import common from './common';

class Index extends Component {
  render() {
    common.func1();
    return (
      123456
    );
  }
}

render(, document.getElementById('app'));

用這種export default的方法那么打包的文件會(huì)是怎么樣的呢？我們看看

export和export default的示例分析

我們發(fā)現(xiàn)整個(gè)文件被打包了

用另一種方式
utils.js

const func1 = () => {
    console.log('func1');
}

const func2 = () => {
    console.log('func2');
}

export {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import {func1} from './common';

class Index extends Component {
  render() {
    func1();
    return (
      123456
    );
  }
}

render(, document.getElementById('app'));

結(jié)果：

export和export default的示例分析

只打包了func1

綜上export default確實(shí)可能會(huì)打包更多不需要的內(nèi)容，但是在某些場(chǎng)景用export default更好。
所以總結(jié)如下：

1.當(dāng)文件存放著很多方法，變量不同場(chǎng)景需要引用不同方法，請(qǐng)用export
2.當(dāng)類只有某幾個(gè)方法，并且每次引用都需要用到里面的大部分方法，請(qǐng)用export default，
  畢竟還有方法提示
3.當(dāng)值導(dǎo)出一個(gè)方法，類請(qǐng)用export default
4.如果一個(gè)文件只會(huì)被某一個(gè)其他文件的子文件，不會(huì)被其他文件引用，并且其中的方法都會(huì)被用到，
  考慮用export default。比如某個(gè)業(yè)務(wù)文件夾下的action.js，用的時(shí)候用import api from './action';
  方便識(shí)別，不用重復(fù)在import的{}中添加，也可以用方法提示。
4.如果一個(gè)文件兼有以上需求 可以同時(shí)export和export default

看完了這篇文章，相信你對(duì)export和export default的示例分析有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)標(biāo)題：export和exportdefault的示例分析
文章分享：http://fisionsoft.com.cn/article/pihpdd.html

新聞中心

其他資訊