React 开发者完全指南：React.FC、函数组件 和更多

时间：2024-03-10 13:28:30

前言

React.FC 是一个 TypeScript 类型，用于 React 函数组件。FC 代表 Functional Component（函数组件）。这个类型的使用有助于在 TypeScript 项目中编写类型安全的 React 组件。使用 React.FC 为组件定义类型就可以享受到 TypeScript 提供的类型检查和自动补全等特性，让开发过程更加高效和减少错误。

为了了解React.FC，我们还需要先知道函数组件是什么。

函数组件

在 React 中，组件可以通过两种方式定义：类组件和函数组件。函数组件是使用 JavaScript 或 TypeScript 函数来定义的组件。这种方式更简洁、易于理解和使用，特别是在引入了 Hooks 之后，函数组件的能力和类组件几乎一样，但写法更为简洁。

函数组件直接返回 React 元素，并可以接受 props（属性）作为参数，用于显示动态内容、处理逻辑等。例如：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

为什么使用 React.FC

  1. 类型安全：虽然 TypeScript 本身确实提供了类型检查，但 React.FC 允许在组件层面上为 props 和组件返回值提供额外的、明确的类型约束，增强了类型检查的严格性。
  2. 支持 JSX：React.FC 的使用确实是为了给 JSX 提供类型检查。JSX 本质上是 React.createElement 的语法糖，没有明确的类型定义，所以 TypeScript 无法直接对其进行类型检查。通过 React.FC，可以确保组件和其子组件遵循正确的类型。

使用 React.FC

使用React.FC例子如下

import React from 'react';

interface Props {
  message: string;
}

const MyComponent: React.FC<Props> = ({ message }) => {
  return <div>{message}</div>;
};

说明

这段代码定义了一个使用 TypeScript 的 React 函数组件，首先定义了一个 TypeScript 接口 Props，它描述了这个组件期望从外部接收的属性。在这个例子中，Props 只有一个属性 message，它是一个字符串。接口的使用确保了类型安全，即组件在使用时 message 属性必须为字符串类型，然后定义了一个函数组件 MyComponent，它通过 React.FC<Props> 指定了其属性的类型。React.FC<Props> 表示一个 React 函数组件，它接受 Props 类型的属性。

React.FC的优缺点

React.FC 的优点

  1. 类型安全：使用 React.FC 可以提供更严格的类型检查，确保组件属性的正确性。
  2. 自动补全：在使用 IDE 时，React.FC 可以提供属性的自动补全，提高开发效率。
  3. 明确的返回类型：React.FC 明确了组件必须返回一个 React 元素，这有助于避免一些常见的错误。

React.FC 的缺点

  1. 默认的 children 属性：React.FC 自动为组件提供了 children 属性，即使组件可能不需要使用它。
  2. Maybe过时：随着 React 和 TypeScript 社区的发展，一些开发者和团队开始偏向于不使用 React.FC，而是直接注明函数返回类型为 JSX.Element，因为这样更直接，避免了 React.FC 的一些自动属性。

替代方案JSX.Element

JSX.Element 是 TypeScript 中定义的类型，代表一个 JSX 表达式的返回值。当在 TypeScript 文件中使用 JSX 语法时，每个 JSX 表达式都被认为返回了 JSX.Element 类型的值。

使用函数组件时，可以显式地标注组件返回类型为 JSX.Element，这样做可以确保组件返回值遵守 React 元素的类型约束。例如：

const Welcome: React.FC<{ name: string }> = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

// 不使用 React.FC，直接指定返回类型
const Welcome = ({ name: string }): JSX.Element => {
  return <h1>Hello, {name}</h1>;
}

附录

React.FC的函数组件会被自动添加上children属性，即此函数组件可以在包别的element

学习阅读：

React 官方中文文档 (docschina.org)

相关文章