React中命名与默认导出的差异及优劣解析（四种写法对比）

先把常见的四种写法列出来，方便对照：

写法1：函数声明 + 默认导出 #

function Home() {
  return <div>Home</div>;
}

export default Home;

写法2：箭头函数 + 默认导出 #

const Home = () => {
  return <div>Home</div>;
};

export default Home;

写法3：函数声明 + 命名导出 #

export function Home() {
  return <div>Home</div>;
}

写法4：箭头函数 + 命名导出 #

export const Home = () => {
  return <div>Home</div>;
};

核心区别：默认导出 vs 命名导出 #

这些写法本质是ES6模块的导出规则，和React本身无关，只是在组件场景下常用：

默认导出（写法1、2） #

• 每个文件只能有一个默认导出
• 导入时可以自定义名称，比如import MyHome from './Home'，不用严格和导出的变量名匹配
• 适合作为文件的核心组件（比如页面级组件），一个文件主要就是这个组件

命名导出（写法3、4） #

• 一个文件可以有多个命名导出，比如同时导出Home和HomeHeader两个组件
• 导入时必须用对应名称，还要加花括号：import { Home } from './Home'，要改名得用as：import { Home as MyHome } from './Home'
• 适合导出多个辅助组件、工具函数，或者同一个文件里的多个关联组件

各写法的优劣对比 #

写法1（函数声明+默认导出） #

• 优点：函数声明会提升（可以在文件里先写导出再定义函数，不过很少有人这么用），语法直观，适合写逻辑复杂的组件
• 缺点：没什么硬伤，除非你要加其他命名导出，注意不要冲突就行

写法2（箭头函数+默认导出） #

• 优点：语法简洁，适合写简单的无状态组件，变量声明的方式更符合现代JS习惯
• 缺点：箭头函数没有自己的this（不过React hooks时代基本用不上this）；变量不会提升，必须先声明再导出

写法3（函数声明+命名导出） #

• 优点：少写一行导出代码，同样支持函数提升，适合导出多个组件时用
• 缺点：导入必须加花括号，初学者容易忘；如果别人用默认导入（import Home from './Home'）会拿到undefined，容易报错

写法4（箭头函数+命名导出） #

• 优点：语法简洁，适合导出多个小型组件或工具函数，和其他变量声明风格统一
• 缺点：变量不会提升，必须先声明再导出；导入需要加花括号，同样容易让初学者踩坑

关于写法3、4是否需要添加export default Home; #

完全不需要，除非你希望这个组件同时支持默认导出和命名导出（这种场景极少，一般只有组件库会这么做兼容）。

如果加了这行代码，就可以同时用两种方式导入：

// 默认导入
import Home from './Home';
// 命名导入
import { Home } from './Home';

但普通项目里这么做只会增加混淆，建议选一种导出风格统一就行。如果你的项目里其他组件都是默认导入的方式，那要么把写法3、4改成默认导出，要么添加export default Home;来兼容，否则导入时会报错。

内容的提问来源于stack exchange，提问作者user21348253