JavaScript 中怎么用 export default 简化单一组件的导出流程-js教程-PHP中文网

export default用于单主功能模块导出，支持函数、类、对象等，导入时可自定义名称；一个文件仅限一个default导出，可与具名导出共存，react组件常用此方式。

javascript 中怎么用 export default 简化单一组件的导出流程

当一个模块只导出一个主要功能（比如一个 React 组件、一个工具函数或一个类），用 export default 可以省去命名和解构的步骤，让导入更简洁直观。

直接导出，无需命名

传统具名导出需要定义名称，导入时也要用对应名字；而 export default 允许你在导出时不指定名称，导入时可自定义任意合法变量名：

导出：export default function Button() { ... } 或 export default Button;
导入：import MyButton from './Button.js';（名字完全自由）
对比具名导出：export function Button() { ... } → 必须 import { Button } from './Button.js';

适用于函数、类、对象、箭头函数等单一值

export default 后面可以跟任何表达式，只要它是模块的“主输出”：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

export default () =>
Hello
;（React 函数组件）
export default class Modal { ... }
export default { api: '/v1', timeout: 5000 };（配置对象）
注意：不能直接 export default const x = 1;，需先声明再导出，或写成 export default 1;

与具名导出共存，但 default 只能有一个

一个文件可以同时有默认导出和具名导出，适合主组件 + 辅助工具的场景：

export default function Chart() { ... }
export function formatData() { ... }
export const TYPES = ['bar', 'line'];
导入时：import Chart, { formatData, TYPES } from './Chart.js';

在 React 中最自然的用法

React 组件文件通常只暴露一个组件，export default 完全契合这种约定：

文件 Card.js：export default function Card({ title, children }) { return
{title}
{children}
; }
使用方：import Card from './Card.js'; → 直接 ...
构建工具（如 Vite、Webpack）和 IDE 也默认识别 default 导出为该模块的“主要入口”