前端之React.FC详细解说

目录

一 简介

二 React.FC 的详细解说：

三 React 团队建议：

---

一 简介

React.FC 是在 TypeScript 中用于定义 React 函数式组件（Functional Component）的一个泛型类型别名。它的全称是 React.FunctionComponent<T>，这里的 T 是一个 Props 类型参数，用来指定组件接收的 props 的类型。

二 React.FC 的详细解说：

类型定义：

• 使用 React.FC 能够为函数组件提供类型安全，确保传入的 props 与组件内部使用的 props 类型一致。

  import React from 'react';
  
  interface MyProps {
    name: string;
    count: number;
  }
  
  const MyComponent: React.FC<MyProps> = ({ name, count }) => {
    // ...
    return <div>{name} - {count}</div>;
  };

• PropsWithChildren：

  • 默认情况下，React.FC 包含了 PropsWithChildren 泛型，这意味着即使你在接口中没有明确声明 children 属性，它也会自动包含对 children prop 的支持，即允许组件接受并渲染子元素。

• 显式的返回类型：

  • 使用 React.FC 定义的函数组件要求其返回值必须是 JSX 元素或者是 null，编译器会进行检查以确保这一点。

• 静态属性支持：

  • 虽然 React.FC 提供了一个方便的方式来声明函数组件，并且理论上可以使用静态属性如 displayName、propTypes 和 defaultProps，但实际上直接在 React.FC 类型上使用这些静态属性可能会导致类型错误或丢失类型信息。推荐的做法是在实际的函数表达式或箭头函数外部直接给函数赋值这些静态属性。

• 与 Hook 的兼容性：

  • 由于函数式组件不包含类组件中的 this 和 setState 方法，因此在 React.FC 定义的组件中应使用 React Hooks（如 useState、useEffect 等）来管理状态和副作用。

三 React 团队建议：

• 随着时间的发展，React 团队已经不再推荐使用 React.FC 来定义组件，尤其是在不需要 props.children 或为了更精确地控制组件的 props 类型时。这是因为 React.FC 有可能引入不必要的 children 类型假设。团队建议直接使用函数声明配合具体的 Props 接口来实现类型检查，例如：

const MyComponent = ({ name, count }: MyProps) => {
  // ...
};

总结来说，React.FC 是一种辅助 TypeScript 用户编写类型安全的 React 函数式组件的方式，但它并非必需，且随着最佳实践的演进，已逐渐被更为精准的类型注解所替代。