33 | 组件与类型（1）：函数组件与类组件-TypeScript开发实战

当前位置:　首页>> 技术小册>> TypeScript开发实战

### 33 | 组件与类型（1）：函数组件与类组件

在React与TypeScript的联合开发实践中，组件是构建用户界面的基石。组件允许我们将UI拆分成独立、可复用的部分，每个部分都负责渲染页面的一部分。TypeScript的加入，为React组件提供了强大的类型检查和智能提示能力，使得代码更加健壮、易于维护。本章节将深入探讨React中的两种基本组件类型：函数组件与类组件，并展示如何在TypeScript环境下使用它们。

#### 3.1 函数组件基础

函数组件是React中最简单的组件形式，它本质上是一个JavaScript函数，该函数接受`props`（属性）作为输入，并返回React元素作为输出。在TypeScript中，我们可以通过为函数组件添加类型注解来增强其类型安全性。

##### 3.1.1 函数组件的定义

一个基本的函数组件示例如下：

```tsx
import React from 'react';

interface WelcomeProps {
  name: string;
  enthusiasmLevel?: number; // 可选属性，默认为1
}

// 使用函数签名定义组件类型
const Welcome: React.FC<WelcomeProps> = ({ name, enthusiasmLevel = 1 }) => {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic. :-D');
  }

const exclamationMarks = Array(enthusiasmLevel + 1).join('!');
  const greeting = `Hello, ${name}${exclamationMarks}`;

return <h1>{greeting}</h1>;
};

export default Welcome;
```

在上述代码中，`Welcome`是一个函数组件，它使用了TypeScript的接口`WelcomeProps`来定义`props`的类型。同时，通过`React.FC<WelcomeProps>`为函数组件添加了类型注解，其中`FC`是`FunctionComponent`的缩写，它是React定义的一个泛型类型，用于描述函数组件的props类型、children类型等。

##### 3.1.2 函数组件的`props`与`children`

在函数组件中，`props`和`children`是两个重要的概念。`props`是传递给组件的数据，而`children`是组件的子元素。在TypeScript中，可以通过接口或类型别名来定义`props`的结构，而`children`通常会自动推断为`ReactNode`类型（一个可以表示React元素的类型）。

```tsx
interface PropsWithChildren {
  title: string;
  children: React.ReactNode; // 允许children为React元素或字符串等
}

const Section: React.FC<PropsWithChildren> = ({ title, children }) => (
  <div>
    <h2>{title}</h2>
    {children}
  </div>
);
```

#### 3.2 类组件基础

与函数组件不同，类组件是继承自`React.Component`或`React.PureComponent`（一个优化版本的`Component`，用于避免不必要的渲染）的ES6类。类组件允许你使用更多的特性，如状态（state）和生命周期方法。

##### 3.2.1 类组件的定义

下面是一个简单的类组件示例，它使用TypeScript定义：

```tsx
import React, { Component } from 'react';

interface CounterState {
  count: number;
}

class Counter extends Component<{}, CounterState> {
  // 初始化状态
  state: CounterState = {
    count: 0
  };

// 更新计数的方法
  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

export default Counter;
```

在这个例子中，`Counter`是一个类组件，它没有使用任何props（因此props类型被留空），但拥有自己的状态`count`。我们通过在类体中定义`state`属性和`increment`方法来管理组件的状态和行为。注意，在类组件中，更新状态应使用`this.setState`方法，该方法接受一个函数，该函数返回新状态，以支持基于当前状态更新状态。

##### 3.2.2 生命周期方法

类组件支持一系列的生命周期方法，这些方法在组件的不同阶段被调用，允许你执行如数据获取、副作用处理等操作。TypeScript为这些生命周期方法提供了类型注解，确保你正确地使用了它们。

```tsx
class MyComponent extends Component<MyProps, MyState> {
  componentDidMount() {
    // 组件挂载后立即执行，常用于数据获取
  }

shouldComponentUpdate(nextProps: MyProps, nextState: MyState) {
    // 返回一个布尔值，决定是否重新渲染组件
    // 可以通过比较props和state来优化性能
    return true; // 示例，总是重新渲染
  }

componentDidUpdate(prevProps: MyProps, prevState: MyState) {
    // 组件更新后立即执行，可用于访问DOM
  }

// 其他生命周期方法...
}
```

#### 3.3 函数组件与类组件的比较

函数组件和类组件各有优缺点，选择哪一种取决于你的具体需求和偏好。

- **函数组件**：
  - 编写简单，易于理解。
  - 适用于大多数情况，特别是当组件不需要状态或生命周期方法时。
  - 随着Hooks（如`useState`、`useEffect`）的引入，函数组件现在能够使用状态和其他React特性。
  - 更好的性能（在大多数情况下），因为函数组件不需要实例化。

- **类组件**：
  - 提供更多的灵活性和控制，特别是通过状态和生命周期方法。
  - 对于需要复杂逻辑或继承的组件来说，类组件可能更合适。
  - 但是，随着Hooks的普及，类组件的一些优势正在减弱。

#### 3.4 实战建议

- **优先考虑函数组件**：在大多数情况下，推荐使用函数组件，因为它们更简单、更轻量级，且易于测试。
- **利用Hooks**：如果你的函数组件需要状态或副作用，考虑使用Hooks来增强它们，而不是转向类组件。
- **评估性能**：虽然函数组件通常性能更好，但在某些情况下（如大量使用Context或Hooks），类组件可能更合适。始终根据实际应用场景评估性能。
- **保持更新**：React和TypeScript都在不断发展，关注最新的最佳实践和API变化，以优化你的组件开发体验。

通过本章节的学习，你应该对React中的函数组件与类组件有了更深入的理解，并掌握了在TypeScript环境下使用它们的基本方法。无论是选择函数组件还是类组件，重要的是要理解它们各自的优势和适用场景，以便在项目中做出合理的选择。

该分类下的相关小册推荐：

TypeScript 全面进阶指南

剑指TypeScript

TypeScript入门指南