React组件导入无需匹配原函数名？与箭头函数是否有关？

一、为什么导入时可以用自定义名称MyComponent？ #

这和ES模块的**默认导出（export default）**机制直接相关：

• 在Hello.js中，你通过export default Hello将箭头函数设为默认导出。默认导出的模块没有固定的对外标识名，导入时可以随意给它起本地别名（比如MyComponent），这个别名仅在当前导入文件内生效，和原文件里的变量名Hello没有绑定关系。
• 简单来说，默认导出就像“打包好一个物品交给你，你可以随便给它起个名字用”，只有命名导出才需要严格对应原名称。

修正标签闭合问题后的代码示例：

Hello.js #

import React from 'react';
const Hello = () => <h1>HELLO</h1>;
export default Hello;

主组件代码 #

import React from 'react';
import MyComponent from './Hello';

class App extends React.Component {
  render() {
    return (
      <div>
        <MyComponent />
      </div>
    );
  }
}

二、替换成普通函数报错是不是箭头函数的特性？ #

不是箭头函数的特性，大概率是你编写普通函数时出现了语法错误。

如果按照正确的普通函数写法编写，完全可以正常运行：

import React from 'react';

function Hello() {
  return <h1>HELLO</h1>;
}

export default Hello;

若出现报错，可能是你写出了类似这样的错误语法：

// 错误写法：混淆了普通函数与箭头函数的语法结构
function Hello() => <h1>HELLO</h1>;

这种写法不符合JS语法规范，自然会报错，但这和箭头函数本身的特性无关。普通函数只要遵循正确语法，并且同样用export default导出，导入后就能正常使用。

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