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

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

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

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

3.1 函数组件基础

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

3.1.1 函数组件的定义

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

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元素的类型）。

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定义：

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为这些生命周期方法提供了类型注解，确保你正确地使用了它们。

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环境下使用它们的基本方法。无论是选择函数组件还是类组件，重要的是要理解它们各自的优势和适用场景，以便在项目中做出合理的选择。