默认导出 vs 具名导出

一个文件里有且仅有一个 默认 导出,但是可以有任意多个 具名 导出。 组件的导出方式决定了其导入方式。当你用默认导入的方式,导入具名导出的组件时,就会报错。如下表格可以帮你更好地理解它们:

语法 导出语句 导入语句
默认 export default function Button() {} import Button from './Button.js';
具名 export function Button() {} import { Button } from './Button.js';

当使用默认导入时,你可以在 import 语句后面进行任意命名。比如 import Banana from './Button.js',如此你能获得与默认导出一致的内容。相反,对于具名导入,导入和导出的名字必须一致。这也是称其为 具名 导入的原因!

通常,文件中仅包含一个组件时,人们会选择默认导出,而当文件中包含多个组件或某个值需要导出时,则会选择具名导出。 无论选择哪种方式,请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件,比如 export default () => {},因为这样会使得调试变得异常困难。

相关推荐
天蓝色的鱼鱼2 小时前
Next.js的水合:静默的页面“唤醒”术
前端·react.js·next.js
lapiii3585 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo12155 小时前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
LRH7 小时前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
歪歪1007 小时前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
XiaoSong7 小时前
React Native 主题配置终极指南,一篇文章说透
前端·react native·react.js
im_AMBER21 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界21 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
今天头发还在吗1 天前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
sjin1 天前
React源码 - 关键数据结构
前端·react.js