为何React组件默认导出为Clock，导入用Clock_1仍可正常运行？

嘿，作为React新手能留意到这个细节真的很棒！其实这完全是ES模块（ES Modules）里默认导出的特性在发挥作用，我给你拆解一下：

• 默认导出的本质：你在clock.js里写的export default Clock，是把Clock类组件设置成了这个模块的默认导出项。和命名导出（比如export const Clock = ...）不同，默认导出在一个模块里只能有一个，而且它不绑定固定的标识符——简单说就是，这个导出的内容没有“必须叫什么名字”的限制。
• 导入时的别名规则：当你用import Clock_1 from './clock/clock'的时候，这里的Clock_1只是你给这个默认导出的组件起的本地别名。你完全可以换成MyClock、WallClock甚至Xyz，只要是合法的变量名，都能正常指向原模块里的Clock组件。
• 为什么路由里能用：不管你导入时叫什么名字，这个变量本质上都是原模块中Clock组件的引用。所以你把它传给Route的component属性时，React能正确识别并渲染这个组件，自然编译运行都不会有问题。

举个对比的例子，如果当时你用的是命名导出：

// clock.js
export class Clock extends Component { ... }

那导入时就必须严格对应名称，要么直接写：

import { Clock } from './clock/clock';

要么用as来重命名：

import { Clock as Clock_1 } from './clock/clock';

这时候就不能随便起名字啦。

所以你遇到的这个现象，就是ES模块默认导出赋予的灵活性，是不是一下子就明白啦？

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