跳到主要内容

函数组件与类组件

在 React 中，组件是构建用户界面的基本单元。React 提供了两种主要的组件类型：函数组件和类组件。本文将详细介绍这两种组件的定义、区别、使用场景以及如何在实际开发中选择合适的组件类型。

什么是函数组件与类组件？​

函数组件​

函数组件是使用 JavaScript 函数定义的组件。它接收一个 props 对象作为参数，并返回一个 React 元素。函数组件通常更简洁，适合用于无状态或简单的 UI 组件。

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

类组件​

类组件是使用 ES6 类定义的组件。它继承自 React.Component，并且必须包含一个 render() 方法，该方法返回一个 React 元素。类组件可以包含状态（state）和生命周期方法，适合用于复杂的逻辑和状态管理。

jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

函数组件与类组件的区别​

1. 语法​

  • 函数组件：使用函数定义，语法简洁。
  • 类组件：使用类定义，语法相对复杂。

2. 状态管理​

  • 函数组件：在 React 16.8 之前，函数组件无法使用状态。现在可以通过 useState Hook 来管理状态。
  • 类组件：可以通过 this.state 和 this.setState 来管理状态。

3. 生命周期方法​

  • 函数组件：没有生命周期方法，但可以通过 useEffect Hook 来模拟生命周期行为。
  • 类组件：可以使用 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。

4. 性能​

  • 函数组件：通常比类组件更轻量，性能更好。
  • 类组件：由于需要实例化类，性能稍差。

实际案例​

案例 1：计数器组件​

以下是一个简单的计数器组件，分别使用函数组件和类组件实现。

函数组件实现​

jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

类组件实现​

jsx
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

案例 2：数据获取组件​

以下是一个从 API 获取数据并显示的组件，分别使用函数组件和类组件实现。

函数组件实现​

jsx
import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

类组件实现​

jsx
import React from 'react';

class DataFetching extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? <pre>{JSON.stringify(this.state.data, null, 2)}</pre> : 'Loading...'}
      </div>
    );
  }
}

如何选择函数组件与类组件？​

提示

在现代 React 开发中，函数组件是首选。它们更简洁、更易于测试，并且可以使用 Hooks 来实现类组件的功能。

  • 选择函数组件：当你需要简单的 UI 组件或使用 Hooks 来管理状态和副作用时。
  • 选择类组件：当你需要复杂的生命周期管理或遗留代码库中已经使用了类组件时。

总结​

函数组件和类组件是 React 中两种主要的组件类型。函数组件更简洁、性能更好，适合现代 React 开发。类组件则适合处理复杂的生命周期和状态管理。在实际开发中，建议优先使用函数组件，并结合 Hooks 来实现类组件的功能。

附加资源与练习​

  • 练习 1：将上述计数器组件改写成使用 useReducer Hook 的函数组件。
  • 练习 2：尝试使用类组件实现一个表单组件，包含输入验证功能。
  • 资源：React 官方文档 提供了更多关于组件和 Hooks 的详细信息。