【React.FC详细讲解】

程序员不想YY啊2024-02-29 22:52

`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设计和类型安全。