React之FC

在 TypeScript 中结合 React 使用时，FC 是 FunctionComponent 的缩写。它是 React 提供的一种类型，用于定义函数组件的类型。

具体来说，import type { FC } from 'react' 是从 React 模块中导入 FC 类型。FC 是一个泛型类型，通常用来描述一个函数组件的结构，包括它的 props 类型。它的完整定义大致如下（简化版）：

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

FC 的作用

1. 类型安全：通过 FC，你可以为函数组件指定 props 的类型，确保组件接收到的 props 符合预期。
2. React 组件的返回值：FC 要求组件返回一个 ReactElement（JSX 元素）或 null，这与 React 函数组件的行为一致。
3. 隐式 children：FC 类型默认包含 children 属性（来自 React.PropsWithChildren），所以如果你用 FC 定义组件，children 会自动被识别为可选属性。

使用示例

import type { FC } from 'react';

// 定义 props 的接口
interface MyComponentProps {
  name: string;
  age: number;
}

// 使用 FC 定义组件
const MyComponent: FC<MyComponentProps> = ({ name, age, children }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      {children}
    </div>
  );
};

// 使用组件
<MyComponent name="Alice" age={25}>
  <span>Hello!</span>
</MyComponent>

注意事项

1. 现代 React 中的趋势：在 React 18 和最新的 TypeScript 项目中，官方逐渐不推荐直接使用 FC，因为它会隐式添加 children 类型，即使你的组件不打算接受 children。这可能导致类型不准确。
   • 替代方案：直接用函数类型定义组件，例如：

     const MyComponent = ({ name, age }: MyComponentProps): JSX.Element => {
       return (
         <div>
           <p>Name: {name}</p>
           <p>Age: {age}</p>
         </div>
       );
     };
     

2. 性能提示：使用 FC 不会影响性能，但如果你需要更精确的类型控制，直接定义函数签名会更灵活。

总结

FC 是 React 中用于类型化函数组件的工具，它简化了组件的类型定义，尤其在需要快速指定 props 类型时很方便。但在现代开发中，可以根据需求选择是否使用它，或者直接使用更显式的类型定义方式。