React组件三大类：类组件、函数组件、高阶组件

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将详细介绍React中的类组件、函数组件和高阶组件，帮助读者理解它们的概念、使用场景和优势，以便在实际项目中合理选择和使用。

引言：

在React开发中，组件是构建应用程序的基本单元。类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。本文将详细介绍这三种组件类型，并探讨在实际项目中如何选择和使用它们。

正文：

1. 类组件（Class Components）

类组件是React早期版本中使用的组件类型，它基于JavaScript类实现。
类组件通常用于具有复杂状态和生命周期方法的组件。
类组件的优点是可以继承和复用，并且可以访问this关键字。

以下是一个简单的 React 类组件代码案例：

import React, { Component } from 'react';

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

  handleClick = () => {
    this.setState({ message: 'Hello, React!' });
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default App;

这个案例创建了一个名为 App 的类组件。组件的状态（state）中有一个 message 属性，初始值为 “Hello, World!”。还有一个 handleClick 方法，用于修改 message 的值。在 render 方法中，将 message 显示为一个 h1 标签，并添加了一个按钮，点击按钮会触发 handleClick 方法。

要使用这个案例，你需要将代码放入一个名为 App.js 的文件中，并在一个 React 项目中导入它。然后，你可以在项目的其他组件中导入 App 组件并使用它。

2. 函数组件（Functional Components）

函数组件是React 16.8版本引入的新组件类型，它基于JavaScript函数实现。
函数组件通常用于简单的组件，它们没有

• 没有状态（state）
• 没有生命周期方法（lifecycle methods）

函数组件的优点是易于理解和编写，并且可以更好地与React Hooks配合使用。

以下是一个简单的 React 函数组件代码案例：

import React from 'react';

const App = ({ message }) => {
  const handleClick = () => {
    return <h1>{message}</h1>;
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default App;

这个案例创建了一个名为 App 的函数组件。组件接收一个名为 message 的属性，用于显示欢迎信息。还有一个 handleClick 函数，用于在点击按钮时返回一个 h1 标签，显示 message 的值。在组件的 return 语句中，将 message 显示为一个 h1 标签，并添加了一个按钮，点击按钮会触发 handleClick 函数。

要使用这个案例，你需要将代码放入一个名为 App.js 的文件中，并在一个 React 项目中导入它。然后，你可以在项目的其他组件中导入 App 组件并使用它。

3. 高阶组件（Higher-Order Components）

高阶组件是一种特殊的组件类型，它接受一个组件作为参数并返回一个新的组件。高阶组件通常用于封装通用逻辑和功能，如数据处理、路由管理等。高阶组件的优点是可以提高代码复用性和模块化。

高阶组件（Higher-Order Component，HOC）是一种在 React 中提升组件抽象性的高级技巧。它是一种复用组件逻辑的一种方法，可以用来提取组件共用逻辑，例如数据获取、状态管理等等。

以下是一个简单的 React 高阶组件代码案例：

import React from 'react';

// 这是一个高阶组件，它接收一个组件作为参数，并返回一个新的组件
const withLoading = (WrappedComponent, isLoading) => {
  return class extends React.Component {
    render() {
      const { isLoading } = this.props;

      if (isLoading) {
        return <div>Loading...</div>;
      }

      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withLoading;

在这个案例中，withLoading 是一个高阶组件，它接收一个组件 WrappedComponent 和一个布尔值 isLoading 作为参数，并返回一个新的组件。这个新的组件会在 isLoading 为 true 时渲染一个加载指示器，否则渲染 WrappedComponent。

要使用这个高阶组件，你需要将代码放入一个名为 withLoading.js 的文件中，并在一个 React 项目中导入它。然后，你可以在项目的其他组件中使用 withLoading 包装你的组件，并传递 isLoading 属性。

例如，如果你有一个名为 MyComponent 的组件，你可以这样使用 withLoading：

import React from 'react';
import withLoading from './withLoading';

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.data}</div>;
  }
}

export default withLoading(MyComponent, false);

在这个例子中，MyComponent 被 withLoading 包装，并传递 false 作为 isLoading 属性。当 isLoading 为 true 时，MyComponent 会渲染一个加载指示器，否则渲染数据。

4. 选择组件类型的考虑因素

在选择组件类型时，需要考虑以下因素：

• 组件复杂度：对于简单的组件，可以选择函数组件；对于复杂的组件，可以选择类组件或高阶组件。
• 状态和生命周期方法：如果组件需要管理状态和生命周期方法，可以选择类组件；如果组件不需要，可以选择函数组件或高阶组件。
• 代码复用和模块化：如果需要封装通用逻辑和功能，可以选择高阶组件。

总结：

类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。掌握这三种组件类型的使用方法，可以根据实际需求在项目中合理选择和使用。

参考资料：

• React官方文档：https://reactjs.org/docs/components-and-props.html
• “React核心概念” by 张浩
• “React组件类型详解” by 刘宇