在 ES6 模块（React 广泛使用的 JS 标准）中，导出代码主要有两种方式。它们的区别主要集中在 “能导出几个” 和 “导入时怎么写” 上。
为了方便理解，我们可以把一个 JS 文件想象成一家专卖店。
1. 默认导出 (Default Export)
- 特点：VIP 主打商品。
- 数量：一个文件里只能有一个
export default。 - 导入写法：不需要花括号
{}，名字可以自己随便起。
代码示例：
// user.js (导出)
// 默认导出一个函数，它是这个文件的主角
export default function User() { ... }
// main.js (导入)
// 因为它是默认的，你可以叫它 User，也可以叫它 MyUser，随你喜欢
import User from './user';
import MySuperUser from './user'; // 完全没问题，指向同一个东西
2. 具名导出 (Named Export)
- 特点：普通商品/零配件。
- 数量：一个文件里可以有无数个
export。 - 导入写法：必须用花括号
{}包裹，而且名字必须和导出时的一模一样（除非用as改名）。
代码示例：
// utils.js (导出)
export const PI = 3.14; // 导出变量
export function add(a, b) {} // 导出函数
// main.js (导入)
// 名字必须对得上，少一个字母都不行
import { PI, add } from './utils';
// ❌ 错误写法：
// import PI from './utils'; // 报错！因为 PI 不是默认导出
核心区别对比表
| 特性 | 默认导出 (export default) | 具名导出 (export) |
|---|---|---|
| 文件内数量 | 唯一 (每个文件最多 1 个) | 不限 (可以是 0 个或多个) |
| 导入语法 | import A from './file' | import { A } from './file' |
花括号 {} | 不需要 | 必须有 |
| 导入时重命名 | 很自由 (随便起名) | 不自由 (必须用 as 关键字) |
| 主要用途 | 文件的主要功能（如 React 组件） | 工具函数、常量、辅助组件 |
