React.FC详细解说

React.FC 是 React 中的一个泛型，用于定义函数式组件（Functional Component）。在 TypeScript 中，React.FC 可以帮助开发者进行类型推导，使得编写 React 组件更加方便。

React.FC 的定义如下：

typescript复制代码

type FC<P = {}> = FunctionComponent<P>;

其中，FunctionComponent 是一个泛型类型，表示一个接收 P 作为 props 类型的函数组件。P 是 props 的类型，可以自定义，默认为空对象 {}。

使用 React.FC 定义函数组件的好处是，它可以自动推导 props 的类型，而不需要手动声明 propTypes 或者定义 props 接口。例如，你可以这样定义一个函数组件：

typescript复制代码

	interface PropsType {
	msg?: string;
	}
	const App: React.FC<PropsType> = ({ msg }) => {
	return <h1>hello, {msg}</h1>;
	};

在这个例子中，App 是一个函数组件，它接收一个可选的 msg 属性，并将其渲染为一个 <h1> 元素。TypeScript 会自动推导 msg 的类型为 string，因此你不需要在组件内部进行任何类型检查或转换。

此外，React.FC 还包含了一些自动完成的静态属性，如 displayName、propTypes 和 defaultProps。这些属性可以帮助你更好地调试和维护组件。需要注意的是，defaultProps 与 React.FC 结合使用可能会存在一些问题，因为 defaultProps 的类型必须与 props 的类型一致，否则 TypeScript 会报错。

总的来说，React.FC 是 React 中用于定义函数式组件的一种便捷方式，它结合了 TypeScript 的类型推导和自动完成功能，使得编写 React 组件更加高效和可靠。