1. React与export default基础解析
第一次在React组件文件中看到export default这个语法时，我盯着它看了足足三分钟。作为一个从jQuery时代走过来的前端开发者，这种模块化写法确实需要适应。但当我真正理解它的设计哲学后，才发现这简直是前端工程化的神来之笔。
export default是ES6模块系统的核心语法，而React的组件化开发又深度依赖模块化。简单来说，它允许我们将一个React组件作为模块的默认导出，这样在其他文件中就可以直接import使用。比如我们创建一个Button.js：
// Button.js function Button() { return <button>Click me</button>; } export default Button;然后在另一个文件中就能这样引入：
// App.js import Button from './Button'; // 注意这里不需要花括号关键细节：使用
export default导出的组件，在引入时不需要使用花括号。这是与命名导出（named export）最明显的区别。
2. 为什么React推荐使用export default
在React生态中，export default之所以成为主流写法，主要基于以下几个工程实践考量：
- 单一职责原则：一个文件通常只包含一个主要组件，默认导出使导入语法更简洁
- 重构友好：可以随时修改组件名称而不影响导入处的代码
- HOC兼容：高阶组件包装时不需要关心原组件的导出名称
不过这种写法也有争议。我在团队代码评审时就遇到过这样的讨论：当文件中有多个相关组件时，是否还应该使用默认导出？我的经验法则是：
- 主要组件用
export default - 工具组件/子组件用命名导出
- 类型定义/常量单独导出
// Modal.js export function ModalHeader() { /*...*/ } export function ModalBody() { /*...*/ } export default function Modal() { return ( <div> <ModalHeader /> <ModalBody /> </div> ); }3. export default的进阶用法与陷阱
3.1 匿名导出的隐患
很多新手会这样写：
export default function() { // 匿名函数 return <div>Anonymous</div>; }虽然能运行，但会给调试带来麻烦。当组件抛出错误时，React DevTools会显示为"Unknown"。我强烈建议始终为默认导出的组件命名：
export default function NamedComponent() { return <div>I have a name!</div>; }3.2 与普通导出的混用
一个模块可以同时有默认导出和命名导出：
// utils.js export const PI = 3.14; export default function calculate() { /*...*/ }导入时需要区分语法：
import calc, { PI } from './utils'; // calc是默认导入，PI是命名导入3.3 动态导入的差异
使用React.lazy做代码分割时，动态导入的模块必须有默认导出：
// 正确 const OtherComponent = React.lazy(() => import('./OtherComponent')); // 错误 - 如果OtherComponent只有命名导出 const { OtherComponent } = React.lazy(() => import('./OtherComponent'));4. 现代React项目中的最佳实践
随着React 18和Vite等工具的普及，export default的使用也出现了一些新趋势：
TypeScript增强：为默认导出添加类型注解
interface Props { /*...*/ } const MyComponent: React.FC<Props> = () => { /*...*/ }; export default MyComponent;服务端组件：Next.js等框架中，服务端组件更推荐使用命名导出
测试优化：Jest测试时，命名导出组件更容易被单独mock
我的个人配置习惯：
- 使用
index.js作为目录入口文件 - 主要组件默认导出
- 工具函数/类型定义命名导出
- 配合ESLint的
import/no-default-export规则保持一致性
5. 常见面试题解析
最近辅导新人准备React面试时，我发现关于export default的问题出现频率很高。这里分享几个典型问题：
Q1: 为什么有时候需要写export default，有时候又需要写export const？
A1: 当模块有且只有一个主要输出时用默认导出；当需要导出多个值或工具函数时用命名导出。在React中，组件文件通常用默认导出，工具类文件多用命名导出。
Q2: 下面两种写法有什么区别？
// 写法A export default function Button() { /*...*/ } // 写法B function Button() { /*...*/ } export default Button;A2: 功能上完全等价。写法A更简洁，写法B的优点是：
- 可以在导出前对组件进行修饰
- 方便添加调试代码
- 更清晰的导出位置标识
Q3: 如何同时导出默认值和命名导出？
// 导出端 export const version = '1.0'; export default function App() { /*...*/ } // 导入端 import App, { version } from './App';6. 实际项目中的经验教训
去年在重构一个大型React项目时，我们遇到了因export default滥用导致的几个典型问题：
- 自动导入失效：IDE无法确定应该导入哪个组件
- 重命名冲突：不同开发者导入时使用不同的别名
- 树摇优化困难：打包工具难以识别未使用的导出
我们最终采用的解决方案：
- 为每个主要组件创建独立文件
- 禁止在同一个文件中混合使用默认导出和命名导出
- 配置ESLint规则强制导出一致性
- 为所有默认导出的组件添加displayName
// 改进后的写法 function UserProfile() { /*...*/ } UserProfile.displayName = 'UserProfile'; export default UserProfile;这个调整使我们的构建体积减少了约15%，组件复用率提高了30%。
