TypeScript 结合 React 开发时候 , React.FunctionComponent 解释

在 TypeScript 结合 React 开发时，React.FC（或 React.FunctionComponent）是一个泛型类型，它用于定义函数组件的类型。这个类型定义了函数组件的结构和预期行为，并且提供了泛型支持，以便你可以指定组件 props 的类型。

React.FC 做了以下几件事情：

定义 Props 类型 :

通过泛型参数，React.FC 允许你指定 props 的类型。例如：
tsx 复制代码
```
type MyComponentProps = {
  message: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ message }) => {
  return <div>{message}</div>;
};
```
在这个例子中，MyComponent 的 props 类型被定义为 MyComponentProps。
隐含 children :
React.FC 隐式地给组件的 props 类型添加了 children 属性，这意味着你可以在组件中使用 props.children 而不需要在你的类型定义中显式声明它。
tsx 复制代码
```
const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return <div>{children}</div>;
};
```
在这个例子中，即使 MyComponentProps 没有定义 children 属性，你也可以使用它，因为 React.FC 已经包含了它。
返回类型 :
React.FC 类型也隐式地定义了组件的返回类型，这意味着你的组件返回的必须是一个 React 元素或者 null。
PropTypes 和 defaultProps :
React.FC 类型还提供了对 propTypes 和 defaultProps 的支持。虽然在 TypeScript 中，propTypes 不如类型定义那么常用，但 defaultProps 的支持可以让你为 props 设置默认值。
tsx 复制代码
```
const MyComponent: React.FC<MyComponentProps> = ({ message = "Hello" }) => {
  return <div>{message}</div>;
};
```
在这个例子中，如果没有提供 message prop，它会默认为 "Hello"。

然而，使用 React.FC 并不是没有争议的。有一些原因导致一些开发者选择不使用 React.FC：

显式与隐式 :

一些开发者更喜欢显式地声明 children，以便更清楚地了解组件的 props 结构。
defaultProps 的行为 :

在使用泛型和默认 props 的情况下，defaultProps 有时会与 TypeScript 的类型推断发生冲突。
组件返回类型 :

当你不希望组件返回 null 时，使用 React.FC 可能会让类型检查变得不那么严格。

因此，是否使用 React.FC 取决于你的个人或团队的偏好。一些团队可能会选择不使用 React.FC 并直接声明函数的类型，例如：

tsx 复制代码

type MyComponentProps = {
  message: string;
  children?: React.ReactNode; // 显式地声明 children
};

const MyComponent = ({ message, children }: MyComponentProps) => {
  return <div>{message}{children}</div>;
};

在这种方式中，你完全控制了组件的 props 类型定义，并且避免了 React.FC 可能引入的任何隐式行为。