React.FunctionComponent和普通JS函数组件有什么区别？

Question

这两个示例完成了相同的事情。但是，在底层有什么区别呢？我了解函数组件与React.Component和React.PureComponent之间的区别，但我还没有找到有关 React.FunctionComponent 的相关文档。

React.FunctionComponent

const MyComponentA: React.FunctionComponent = (props) => {
  return (
    <p>I am a React.FunctionComponent</p>
  );
};

纯JS函数组件：

const MyComponentB = (props) => {
  return (
    <p>I am a plain JS function component</p>
  );
};

- jacobsowles

---

我很确定它们完全相同，只是一个是TypeScript，另一个是JavaScript。 - Herohtar

一种是TypeScript + JSX，另一种只用JSX。 - Patrick Roberts

Answer 1

实质上它们没有区别。第一个示例使用TypeScript语法表示React.FunctionComponent的类型，但它们都是纯JS函数组件。

- Ryan Cogswell

---

有一些细微的差别，普通的函数组件可以返回字符串，例如：const FooString = () => "foo";但是你不能从FunctionComponent返回字符串。const BarString: React.FC<{}> = () => "string";因此，返回类型必须是ReactElement|null。 - xiechao06

这不是真的。在幕后，FunctionComponent 至少有 children 属性，而在您的普通 JS 函数组件中，您需要定义它。 - philk

Answer 2

有一些小差别，纯函数组件可以返回字符串，例如：

const FooString = () => "foo";

但是您无法从FunctionComponent返回字符串。

const BarString: React.FC<{}> = () => "string";

因此，返回类型必须为 ReactElement|null。

- xiechao06

---

我是 TS 的新手，有人知道这是为什么吗？ - Joel Mellon

在第一个代码示例中，TypeScript 将把该函数视为普通函数，并且可以从中“看到”它返回一个字符串，这是完全正确的。在第二个示例中，我们告诉 TS 该函数是一个 React.FC（它被定义为返回 ReactElement|null），但是因为编译器看到返回的是字符串，所以会生成一个警告。 - wybe

哦，明白了。那很有道理。我没有真正考虑到 React.FunctionComponent 是一个类，我们实际上是在为函数的返回值提供类型提示。满分10分，谢谢朋友。 - Joel Mellon

Answer 3

不同之处在于FunctionComponent默认带有一个属性：children

// Note, no children defined
type Props = {
  name: string
}

const MyComponentA: React.FunctionComponent<Props> = (props) => {
  return (
    <p>I am a React.FunctionComponent and my name is {props.name}</p>
    <p>And I have {props.children}</p>
  );
};

const MyComponentB = (props: Props) => {
  return (
    <p>I am a plain JS function component</p>
    <p>But my {props.children} are undefined</p>
  );
};

对于MyComponentB，TS编译器会抱怨children未定义。

当然，对于这两个组件，您可以只传递子级并忽略TS警告。

- philk

---

在React中，无论哪种情况下，props.children都可以使用。 - ParagDineshGupta

由于某些原因，当使用FunctionComponent时，我无法像在MyComponentA中那样获取children属性。我正在使用react 18+... 或者至少typescript正在显示错误... - ii iml0sto1

这个答案已经不再适用了；他们从 React.FunctionComponent 中删除了 children，因为并非所有的组件都会处理子属性。如今要让 React.FunctionComponent 接受 children，你需要这样做：React.FunctionComponent<PropsWithChildren<Props>>。 - cthulhu