导出const箭头函数与普通函数的区别及适用场景

先看两种常见的组件导出写法：

第一种：

// App.jsx
export function App() {}

// index.jsx
import { App } from './App'

第二种：

// App.jsx
export const App = () => {}

// index.jsx
import { App } from './App'

两种写法的核心差异 #

说白了就是函数声明和箭头函数表达式的区别，具体差异体现在这几点：

• this指向：函数声明里的this是动态绑定的，但在React函数组件的严格模式下，this基本都是undefined，所以这个差异在组件里几乎可以忽略；箭头函数的this是固定的，继承自定义它时的上下文。
• 代码提升：函数声明会被“提前”到作用域顶部，哪怕在声明前调用也不会报错；箭头函数是变量赋值，只有在代码执行到赋值那一行之后才能调用，否则会拿到undefined。
• 调试友好度：函数声明自带名称，调试时栈信息里显示的是App，一眼就能认出；箭头函数如果是赋值给变量，调试栈也会显示变量名，但要是匿名箭头函数直接导出（比如export default () => {}），调试时就只会显示anonymous，找问题会麻烦点。
• arguments对象：函数声明能直接用arguments获取所有传入的参数；箭头函数没有自己的arguments，要拿参数只能用剩余参数...args。

该选哪种？看场景 #

• 优先用函数声明（export function App() {}）的情况：

  • 组件逻辑复杂，需要清晰的调试信息，方便排查bug；
  • 团队代码风格统一要求用函数声明；
  • 特殊场景下需要用到arguments（不过React组件里这种情况极少，因为props都是明确传入的）。

• 适合用箭头函数表达式（export const App = () => {}）的情况：

  • 组件是纯展示型的，逻辑简单，甚至一行就能写完返回值（比如export const App = () => <div>Hello</div>）；
  • 你或者团队更喜欢简洁的语法风格；
  • 需要利用箭头函数固定this的特性（不过在函数组件里几乎用不到，因为函数组件没有实例this）。

总结 #

在React函数组件里，这两种写法功能上几乎没区别，大部分时候随便选都行。核心的选择标准还是团队的代码规范，或者看你是否需要用到某一种写法的特定特性（比如调试时的可读性、代码提升规则）。

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