今天聊聊 TS + react 的组件写法， 为什么都是以 React.FC 为开始

曼陀罗
224 阅读2分钟

使用 React.FC（或 React.FunctionComponent）来定义 TypeScript + React 组件有几个好处：

  1. 类型推断：

    • React.FC 自动推断 children 属性，因此你不需要手动声明它。所有使用 React.FC 的组件都可以接收 children，这对于渲染嵌套组件非常方便。

  2. 增强类型安全：

    • 使用 React.FC 可以提供更好的类型检查。当你定义组件的 props 时，TypeScript 可以确保传递的 props 符合预期的类型，减少运行时错误的可能性。

  3. 易于维护：

    • 通过将组件的类型定义放在一处，React.FC 可以使代码更具可读性和可维护性，尤其是在大型代码库中。

  4. 默认 props：

    • React.FC 可以很好地与默认 props 配合使用，可以更容易地定义带有默认值的组件。

  5. 自文档化：

    • 组件的定义方式让它看起来更像一个函数，这样其他开发者可以快速理解它是如何工作的，参数是什么。

示例

import React from 'react';

interface MyComponentProps {
  title: string;
  subtitle?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, subtitle, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {subtitle && <h2>{subtitle}</h2>}
      {children}
    </div>
  );
};

在这个例子中，MyComponent 接收 title 和可选的 subtitle 作为 props，并且还可以接收 children，这都是通过 React.FC 提供的便利。

注意事项

  • 尽管 React.FC 有很多优点，但在某些情况下，有些开发者更喜欢直接使用函数组件（const MyComponent = (props: MyComponentProps) => {}），因为这样可以更灵活地处理 props，尤其是在不需要 children 或想要自定义 props 的时候。
  • React.FC 可能会导致类型不明确，特别是如果没有定义 children，在使用时可能会导致一些意外的类型错误。

总的来说，使用 React.FC 是一种便捷且类型安全的方式来定义 React 组件，尤其是在需要处理 children 和进行类型推断时。

avatar
文章
阅读
粉丝