JavaScript 里两个主要用来导入、导出值的方式

默认导入/导出 vs 具名导入/导出

本文会结合 React 中的 组件 详细说明两者的差异，和在日常项目中的使用。

默认导入/导出

// Person.js

function Age() {
	return <div>18</div>
}

export default function Person() {
	return (
		<div>
			<h1>My name is Jack.</h1>
			<Age />
		</div>
	)
}

// App.js

import MyPerson from './Person.js'

export default function App() {
	return (
		<MyPerson />
	)
}

上述示例中：

Person.js:

定义了 Age 组件，该组件仅在该文件内使用，没有被导出。
使用 默认导出 的方式，将 Person 组件导出。

App.js:

使用 默认导入 的方式，从 Person.js 中导入 Person 组件。当使用 默认导入 时，可以在 import 语句后面进行任意命名。
使用 默认导出 的方式，将根组件 App 导出。

具名导入/导出

// Person.js

export function Age() {
	return <div>18</div>
}

export function Name() {
	return <h1>My name is Jack.</h1>
}

// App.js

import { Age, Name } from './Person.js'

export default function App() {
	return (
		<Name />
		<Age />
	)
}

上述示例中：

Person.js:

定义了 Age 组件和 Name 组件，都 没有 被 默认导出 。

App.js:

使用 具名导入 的方式，从 Person.js 中导入 Age 组件、Name 组件。对于 具名导入 ，导入和导出的名字必须一致。这也是为什么称其为 具名 导入的原因！
使用 默认导出 的方式，将根组件 App 导出。

总结：

日常项目中，可以在一个文件中，选择使用上述一种，或者两种都使用。一个文件里有且仅有一个 默认 导出，但是可以有任意多个 具名 导出。
通常，文件中仅包含一个组件时，会选择 默认导出 ，而当文件中包含多个组件或某个值需要导出时，则会选择 具名导出 。

注意：

为了减少在 默认导出 和 具名导出 之间的混淆，一些团队会选择只使用一种风格（默认或者具名），或者禁止在单个文件内混合使用。这因人而异，选择最适合你的即可！