命名导出

命名导出用于从模块中导出多个变量、函数和类。每个导出的元素都有一个名称，这样就可以有选择性地只导入需要的部分。

例如，编写如下代码

// utils.js
export const PI = 3.14；

导出函数 add(a, b) {
  return a + b；
}

export class Calculator {
  subtract(a, b) {
    返回 a - b；
  }
}

如上所示导出后，可以像下面这样在需要的地方导入。

// main.js
import { PI, add, Calculator } from './utils.js'；

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

const calc = new Calculator()；
console.log(calc.subtract(5, 2)); // 3

默认导出

Default Export 用于从模块中导出单个默认值。每个模块只能有一个默认导出值，导入时可以为其命名。

如下所示

// logger.js
导出默认值 function log(message) {
  console.log(message)；
}

像这样导入

// app.js
import log from './logger.js'；

log('Hello!'); // 你好！

主要区别

导出次数
- 命名导出：可有多个
- 默认导出：每个模块只能导出一个
导入语法
- 已命名导出：从'./module'导入 { name1, name2 }；
- 默认导出：从'./module'导入 anyName；
重命名
- 命名导出：从'./module'导入 { originalName as newName }；
- 默认导出：导入时可自由命名
完全导入
- 已命名导出：从"./module "导入 * 作为 moduleName；
- 默认导出：无需完全导入，因为它已被视为一个对象
动态导入
- 命名导出：import('./module').then(module => module.namedExport)
- 默认导出：import('./module').then(module => module.default)

什么情况下应该使用其中一种而不是另一种？

命名导出：当你想从一个模块中导出多个实用程序函数或变量，并有选择性地导入和使用它们时使用。
默认导出：用于导出模块的主要功能或类。

利用 index.js

让我们来看看一个文件夹结构如下的项目

如下所示，每个组件都以 "命名导出 "的方式导出。

const TestComponent = () => {
  返回 <div></div>；
};

export { TestComponent }；

要编写它，我们可以这样导入

import { TestComponent, TestComponent2 } from '@/components/ui';

function App() {
  return (
    <div>
      <TestComponent />
      <TestComponent2 />
    </div>
  );
}

export default App;

让我们创建如下的 index.js(ts)文件并再次导出。

// 命名导出
export { TestComponent } from './TestComponent'；
export { TestComponent2 } from './TestComponent2'；

// 默认导出
export { default as TestComponent } from './TestComponent'；
export { default as TestComponent2 } from './TestComponent2'；

然后，在导入的地方，我们可以像这样导入得更简洁一些

import { TestComponent, TestComponent2 } from '@/components/ui'；

函数 App() {
  返回 (
    <div> <TestComponent
      <TestComponent /> <div> <TestComponent1
      <TestComponent2 />.
    </div> </div
  );
}

} export default App；

使用 index.js 的利弊

优点

作为进入目录的入口，简化了模块结构。
可以在一个文件中导出多个文件的内容，使导入语句更加简洁。
更改目录结构不会影响外部代码。

缺点

如果在 index.js 中放入过多内容，文件可能会变得杂乱无章。

避免导出默认值

文档建议避免使用 Export Default。(至少在 TypeScript 项目中是这样）主要原因如下

不支持重命名

当你在集成开发环境中通过重构重命名某些东西时，它不会自动重命名。例如，如果你将TestComponent重命名为TestComponent2，它在导入部分不会改变。但如果使用 "命名导出"，则会发生变化。

重命名自由造成的不一致

使用默认导出时，您可以在导入时使用任何名称，这意味着同一个模块可以在不同的文件中使用不同的名称。
这会导致代码不一致和混乱。

缺乏类型信息

默认导出不提供类型信息，因此可能不清楚导出的是什么类型的对象或函数。

了解命名和默认导出