在 React 中使用 TypeScript 导出默认函数的最佳实践？

Question

我目前正在使用 TypeScript 学习 React，并且遇到了两种不同的方法来导出默认函数组件。这是两个例子：

1. 单独导出函数：

function PriceListPage() {
    return (<></>);
}

export default PriceListPage;

2. 在声明时直接导出函数：

export default function PriceListPage() {
    return (<></>);
}

两者的工作方式似乎相同，而且我没有注意到行为上有任何技术差异。

我的问题是：

• 这两种方法之间有技术差异吗？
• React 或 TypeScript 社区是否有任何适合其中一种风格的最佳实践、约定或建议？

我是一个即将推出的新的large单页前端项目的全栈软件工程师，并决定将 React 与 TypeScript 结合使用。作为使用最佳实践设置代码样式的一部分，我想知道这些样式之间是否也存在任何实际差异，以及是否应该优先考虑其中的可维护性。

任何关于哪种方法更常用或为什么一种方法可能更受青睐的见解将不胜感激！

Answer 1

两者之间没有技术差异。

说到最佳实践，这取决于您团队的惯例，但我认为通常最佳实践是根本不使用默认导出，而是使用

export function PriceListPage() {
    return (<></>);
}

默认导出的问题在于，重命名它们太容易了，如果在不同文件中以不同方式调用同一组件，则会使代码更难以理解。如有必要，命名导出也可以重命名，但至少导入行对于重命名更加明确，因此很难意外地进行重命名。