Javascript中export后该不该加default？

在 JavaScript（特别是 ES6 模块系统）中，export 和 export default 是两种不同的导出方式，它们在语法、使用方式和导入时的行为上有显著区别。以下是详细的对比和说明：

• export（命名导出）

  用于导出一个模块中的多个具体命名的值（如变量、函数、类等）。

  导出的每个值都有一个明确的名称，导入时需要使用相同的名称。

  示例：

  export const name = "Alice";export function sayHello() { console.log("Hello");}

• export default（默认导出）

  用于导出一个模块的“默认值”，一个模块只能有一个默认导出。

  默认导出的值没有固定的名称，导入时可以自定义名称。

  示例：

  export default function sayHello() { console.log("Hello");}

• export（命名导出）

  导入时需要使用 {} 并指定具体的名称，名称必须与导出时一致。

  可以按需导入部分值，也可以使用 * as 导入所有命名导出。

  示例：

  // 文件: module.jsexport const name = "Alice";export function sayHello() { console.log("Hello");}// 文件: main.jsimport { name, sayHello } from "./module.js";console.log(name); // "Alice"sayHello(); // "Hello"// 或者导入所有import * as module from "./module.js";console.log(module.name); // "Alice"

• export default（默认导出）

  导入时不需要 {}，可以自定义名称。

  一个模块只能有一个默认导出，导入时直接使用 import 自定义名称 from ...。

  示例：

  // 文件: module.jsexport default function sayHello() { console.log("Hello");}// 文件: main.jsimport greet from "./module.js"; // 名称 "greet" 是自定义的greet(); // "Hello"

• export（命名导出）

  一个模块可以有多个命名导出，没有数量限制。

  示例：

  export const a = 1;export const b = 2;export const c = 3;

• export default（默认导出）

  一个模块只能有一个默认导出，尝试定义多个会导致语法错误。

  示例：

  export default function foo() {}export default function bar() {} // 错误：只能有一个默认导出

• 你可以在同一个模块中同时使用 export 和 export default，它们互不冲突。
• 示例：export const name = "Alice";export default function sayHello() { console.log("Hello, " + name);}// 导入import greet, { name } from "./module.js";console.log(name); // "Alice"greet(); // "Hello, Alice"

• export（命名导出）

  适用于需要导出一组相关功能或值的场景，例如工具模块或常量集合。

  示例：导出多个工具函数

  export const add = (a, b) => a + b;export const subtract = (a, b) => a - b;

• export default（默认导出）

  适用于模块有一个主要功能的场景，通常是模块的核心功能或组件。

  示例：React 组件

  export default function MyComponent() { return <div>Hello</div>;}

• export（命名导出）

  导出的值是“实时绑定”的，导入的地方可以感知到值的变化（因为它是引用）。

  示例：

  // module.jsexport let counter = 0;setTimeout(() => counter++, 1000);// main.jsimport { counter } from "./module.js";console.log(counter); // 0setTimeout(() => console.log(counter), 2000); // 1

• export default（默认导出）

  默认导出是一个具体的值，导出时会被固定（如果是对象，则是引用）。

  示例：

  // module.jslet counter = 0;export default counter;setTimeout(() => counter++, 1000);// main.jsimport counter from "./module.js";console.log(counter); // 0setTimeout(() => console.log(counter), 2000); // 0（不会变化）

选择 export 还是 export default 取决于模块的设计需求：

• 如果模块有多个导出，使用 export。
• 如果模块只有一个主要导出，使用 export default。

在 React Router v7 中，推荐使用命名导出以适应其约定和工具链要求。