有趣的地方

有趣的地方

【React.FC详细讲解】

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:

interface MyComponentProps {
  title: string;
  // 如果组件确实需要 children,则显式声明
  // children?: React.ReactNode;
}

const MyComponent = ({ title }: MyComponentProps) => {
  return <h1>{title}</h1>;
};

使用 React.FC:

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

发表评论:

Powered By Z-BlogPHP 1.7.3

© 2018-2020 有趣的地方 粤ICP备18140861号-1 网站地图