Javascript 什么'；React.FunctionComponent和普通JS函数组件的区别是什么？

这两个例子完成了相同的事情。但是引擎盖下的区别是什么？我了解functional components与React.Component和React.PureComponent的区别，但是我还没有找到关于

React.FunctionComponent

的相关文档

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

反应功能组件

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

const mycomponent a:React.FunctionComponent=（props）=>{
返回(
我是React.FunctionComponent

);
};

普通JS功能组件：

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

constmyComponentB=（道具）=>{
返回(
我是一个普通的JS函数组件

);
};

发动机罩下没有区别。第一种是使用TypeScript语法指示React.FunctionComponent的类型，但它们都是普通的JS函数组件。

有一些细微的区别，普通函数组件可以返回字符串，如：

const FooString = () => "foo";

但无法从

函数组件

返回字符串

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

const BarString:React.FC=（）=>“string”；

---

因此返回类型必须是

ReactElement | null

不同之处在于

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>
  );
};

//注意，没有定义子项
类型道具={
名称：string
}
常量MyComponentA:React.FunctionComponent=（道具）=>{
返回(
我是React.FunctionComponent，我的名字是{props.name}

我有{道具，孩子}

);
};
常量MyComponentB=（道具：道具）=>{
返回(
我是一个普通的JS函数组件

但是我的{props.children}没有定义

);
};

对于

MyComponentB

，TS编译器会抱怨未定义

children

---

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

非常确定它们完全相同，但一个是TypeScript，另一个是JavaScript。一个是TypeScript+JSX，另一个只是JSX。有一些细微的区别，普通函数组件可以返回字符串，如：``const FooString=（）=>“foo”``但无法从FunctionComponent返回字符串常量条字符串：React.FC=（）=>“字符串”；“``”因此，返回类型必须是ReactElement | null，否则为非true。引擎盖下的FunctionComponent至少有

子项

属性，而在playin JS函数组件中，您必须定义它。