React.FC
React.FC
是一个 TypeScript 中的泛型类型别名,用来定义一个React函数式组件(Functional Component)。其全称是React.FunctionComponent
,这种类型为组件提供了静态类型检查,以确保组件的正确使用。
函数式组件是React中的一类组件,它是用普通JavaScript函数或者箭头函数来定义的,相对于更早期的基于类的组件(Class Components),函数式组件通常更简单,并且可以与React Hooks一起使用,以实现类似类组件中的状态管理和副作用处理。
在 TypeScript 中,React.FC
同时也隐式地为你的组件提供了children的定义,即假定你的组件可以包含children,但是,请注意,从React 18的Typing推荐来看,React团队建议不再使用React.FC,原因是它会默认包含children,即便实际组件可能不需要接受children。相反,他们推荐直接定义组件的props。
下面是一个React函数组件示例,该组件的Props有一个 title 字段:
不使用 React.FC:
tsx
interface MyComponentProps {
title: string;
// 如果组件确实需要 children,则显式声明
// children?: React.ReactNode;
}
const MyComponent = ({ title }: MyComponentProps) => {
return <h1>{title}</h1>;
};
使用 React.FC:
tsx
interface MyComponentProps {
title: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ title, children }) => {
return (
<div>
<h1>{title}</h1>
{children}
</div>
);
};
在上个例子中,即使 MyComponentProps
没有声明 children
属性,使用 React.FC
也会自动提供 children
的类型定义。这在你不希望你的组件接受 children
时可能会造成问题或混淆。
因此,建议明确组件是否应该有 children
,如果不应该有,则不要使用 React.FC
,如当前的最佳实践所示。这样能获得更清晰的API设计和类型安全。