React中export default function与const定义组件的区别

这两段代码的功能完全等价，最终渲染到浏览器的效果一致，但在语法细节和执行特性上存在以下区别：

一、函数定义与导出的写法差异 #

第一段：函数声明 + 直接默认导出 #

使用标准的函数声明语法，同时直接将函数作为默认导出：

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

第二段：箭头函数表达式 + 单独导出 #

先通过箭头函数创建函数实例并赋值给const变量，再单独执行默认导出：

import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App;

二、作用域内的变量提升行为不同 #

• 第一段的函数声明存在变量提升特性：在当前模块的作用域内，即使在函数定义前引用App（比如导入后直接写console.log(App)），也能正常获取到函数引用（不会报错）。
• 第二段的箭头函数属于变量赋值，遵循const的提升规则：变量会被提升，但处于暂时性死区（TDZ），在赋值语句前引用App会触发ReferenceError: Cannot access 'App' before initialization报错。

三、代码扩展灵活性不同 #

第二段的写法将函数定义与导出分离，后续如果需要对组件函数做额外处理（比如添加静态属性、用高阶组件包装）会更直观：

const App = () => { /* ... */ };
// 给组件添加自定义静态属性
App.displayName = "MyCodeSandboxApp";
// 用高阶组件包装
const WrappedApp = withSomeHOC(App);
export default WrappedApp;

而第一段的写法如果要做这类操作，需要先把函数赋值给变量，语法上不如第二段灵活。

总的来说，这些差异都属于语法和执行机制层面的细节，不会影响React组件的渲染逻辑，所以浏览器中显示效果完全一致。

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