10 React.js 组件之类组件与函数组件

在上一篇中，我们探讨了 React 组件的基础使用，包括如何创建基本的组件结构、传递 props 和管理状态。今天，我们将深入了解 React 中的组件类型，特别是类组件和函数组件的区别和使用。

类组件与函数组件的基本概念

在 React 中，组件可以分为两种主要类型：类组件和函数组件。

类组件

类组件是 ES6 语法中的一种类，它通过继承 React.Component 来创建。类组件通常用于需要管理本地状态或生命周期方法的场景。

下面是一个简单的类组件示例：

import React from 'react';

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = { greeting: 'Hello, World!' };
  }

  render() {
    return (
      <h1>{this.state.greeting}</h1>
    );
  }
}

export default Greeting;

在这个例子中，Greeting 组件使用了构造函数初始化状态，并在 render 方法中返回 JSX。

函数组件

函数组件是以函数的形式定义的组件。随着 React Hooks 的引入，函数组件现在能够管理状态和副作用，使得函数组件越来越受欢迎。

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

import React from 'react';

const Greeting = () => {
  const greeting = 'Hello, World!';
  return (
    <h1>{greeting}</h1>
  );
};

export default Greeting;

在这个示例中，Greeting 是一个简单的函数组件，它直接返回一个 JSX 的元素，不需要类的结构。

类组件与函数组件的比较

特性	类组件	函数组件
状态管理	需要使用 this.state 和 this.setState()	使用 useState Hook
生命周期方法	使用类的方法，如 componentDidMount	使用 useEffect Hook
可读性	相对较复杂	简单、易于理解
性能	相对较低	性能更优

使用 Hooks 的函数组件

随着 React 16.8 版本的推出，Hooks 让函数组件能够拥有更多的功能，比如状态管理和副作用处理。下面是一个使用 useState 和 useEffect Hooks 的函数组件示例：

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

const Greeting = () => {
  const [greeting, setGreeting] = useState('Hello, World!');

  useEffect(() => {
    document.title = greeting; // 更新页面标题
  }, [greeting]);

  const changeGreeting = () => {
    setGreeting('Hello, React!');
  };

  return (
    <>
      <h1>{greeting}</h1>
      <button onClick={changeGreeting}>Change Greeting</button>
    </>
  );
};

export default Greeting;

在这个例子中，useState 用于管理 greeting 状态，而 useEffect 则用于执行副作用，比如更新页面的标题。用户点击按钮后，可以通过 changeGreeting 函数更新问候语。

选择组件类型的场景

• 类组件：建议在需要使用生命周期方法或者需要更复杂的状态管理的场景中使用。
• 函数组件：在大多数情况下，现代 React 项目中推荐使用函数组件，尤其是当使用 Hooks 时，它们会让你的代码更简洁、可读。

总结

今天我们深入探讨了 React 的类组件和函数组件的基本概念，提供了实际代码示例以帮助理解。你应该能够根据不同的场景，选择合适的组件类型。从现在开始，你可以利用这两种组件创建更复杂和动态的用户界面。在下一篇中，我们将讨论如何在组件中实现复用，进一步提升我们的组件构建技巧。