在使用 TypeScript 编写 React 组件时，我应该使用函数还是箭头函数？

Question

我感到困惑，因为我知道我可以像这样使用函数表达式：

import React from 'react';
import './App.css';

 const App: React.FC = ({children}) => {
  return (
   <div className="App">
    {children}
   </div>
  );
 }

 export default App;

例如，React Create App使用常规函数声明来生成脚手架项目，无需使用React.FC进行类型定义，但如果我想添加像children这样的props，则必须像这样为其定义类型：

import React from 'react';
import './App.css';

function App({children}: {children: JSX.Element}) {
 return (
  <div className="App">
   {children}
  </div>
 );
}

export default App;

如果我可以使用箭头函数或者一个普通的匿名函数表达式来创建React.FC，那么对我来说这没有意义：

import React from 'react';
import './App.css';

 const App: React.FC = function({children}) {
  return (
   <div className="App">
    {children}
   </div>
  );
 }

 export default App;

而且我不需要为子项属性添加任何类型。

所以问题是，假设React create app使用常规函数声明来搭建应用程序，那么什么是首选方式？但是通过这样做，我会失去React.FC显式的代码块，例如使用函数表达式得到的子项属性。

- jean182

---

这只是个人偏好。你更喜欢哪个？ - JMadelaine

哪个更好：大猩猩还是鲨鱼？ - ggorlen

请注意，如果您有任何组件特定的 props，则需要使用 React.FC<MyProps>，因此它并不是一个明显的优势。 - Aluan Haddad

Answer 1

除了个人喜好外，确实存在差异。

当使用 const Component: React.FC<Props> = (props) => {} 时，它实际上为这些组件属性提供类型信息:

1. propTypes
2. defaultProps
3. displayName
4. ...以及其他一些不常用的属性

而当使用 function Component(props: Props): JSX.Element {} 时，以上属性将没有类型信息。

就运行React代码而言，两者之间没有实质性区别。

它所做的只是提供给您类型信息+智能感知代码自动完成，这在运行时并不重要。

这就是为什么最终还是取决于“个人喜好”的原因。

- yqlim