Export & Import用法总结

Dickensl

发布于 2022-06-14 13:08:28

5100

文章被收录于专栏：睿Talks睿Talks

一、前言

最近在做React组件库升级的时候，发现以前这种旧的import方式不能用了：

import zent from 'zent';

const {Input, Notify} = zent;

要改成这种形式：

import {Input, Notify} from 'zent';

究其原因，是组件库的export方式改变了。旧版本是这样export的：

const zent = {
    Input, 
    Notify,
    ...
};

export default zent;

而新版本是这样的：

export {
    Input, 
    Notify,
    ...
};

二、知识点

Export支持2种方式，一种是 Named export（新版组件库），另一种是 Default export（旧版组件库）。

使用 Named export可以在import的时候指定子模块：

import {Input, Notify} from 'zent';

而使用Default export在import的时候只能引用模块整体：

import zent from 'zent';

后续使用子模块时再做解构：

const {Input, Notify} = zent;

另外，Named export 还有另外一种形式：

export const getAllDepts = () => {...};

export const getCurDept = () => {...};

export const getHeadquarter = () => {...};

也可以在使用的时候指定需要的子模块：

import {getAllDepts, getCurDept} from 'util'

如果在 Name export 中也使用 export default：

export const getAllDepts = () => {...};

export const getCurDept = () => {...};

export const getHeadquarter = () => {...};

export default getCurDept;

当 import 时不指定子模块，就会默认加载 default 子模块。

三、设计原则：

当模块有多个独立功能，可以分拆使用的时候（如工具类模块），应使用 Named export 的方式。当模块只包含一个独立的整体（如React组件），则使用 Default export 的方式。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-14，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

react

登录后参与评论

0 条评论

热度