这两个例子完成了同样的事情。但是引擎盖下的区别是什么？我了解函数式组件与 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>
);
};
引擎盖下没有区别。第一个是使用 TypeScript 语法来指示类型，React.FunctionComponent但它们都是普通的 JS 函数组件。
有一些细微差别，普通函数组件可以返回字符串，例如：
const FooString = () => "foo";
但是你不能从FunctionComponent.
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>
);
};
对于MyComponentBTS 编译器会抱怨children未定义。
当然，对于这两个组件，您可以只传递子组件并忽略 TS 警告。