React 中的函数组件与类组件：选择哪一个？-js教程-PHP中文网

React 中的函数组件与类组件：选择哪一个？

Barbara Streisand

发布： 2024-12-22 08:00:15

原创

742 人浏览过

Functional Components vs Class Components in React: Which One to Choose?

React 中的函数式组件与类组件

React 允许开发者通过两种主要方式创建组件：功能组件 和 类组件。虽然两者都具有定义可重用 UI 片段的相同目的，但它们在语法、功能和用法方面有所不同。

1.功能组件概述

函数式组件是返回 JSX 的 JavaScript 函数。它们简单且轻量级，主要设计用于呈现 UI。随着 React Hooks 的引入，功能组件变得更加强大，现在可以管理状态和生命周期方法。

功能组件示例

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

登录后复制

2.类组件概述

类组件是扩展 React.Component 的 ES6 类。它们具有更复杂的结构，并且可以使用状态和生命周期方法，而无需额外的工具。在 React Hooks 之前，类组件对于管理状态和逻辑至关重要。

类组件示例

import React, { Component } from "react";

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

登录后复制

3.功能组件和类组件之间的主要区别

Aspect	Functional Components	Class Components
Definition	Defined as a JavaScript function.	Defined as an ES6 class.
State Management	Use React Hooks (e.g., useState).	Use this.state for state.
Lifecycle Methods	Managed with Hooks like useEffect.	Use built-in lifecycle methods.
Syntax Simplicity	Simple and concise.	More verbose with boilerplate.
Performance	Generally faster and lightweight.	Slightly slower due to overhead.
Usage Trend	Preferred in modern React development.	Common in legacy codebases.

方面功能组件类组件标题> 定义定义为 JavaScript 函数。定义为 ES6 类。状态管理使用 React Hooks（例如 useState）。使用 this.state 作为状态。生命周期方法使用 useEffect 等 Hooks 进行管理。使用内置生命周期方法。语法简单简单明了。使用样板更详细。性能通常更快且轻量。由于开销，速度稍慢。使用趋势现代 React 开发中的首选。在遗留代码库中很常见。表>

4.功能组件：优点和局限性

优点

更简单的语法：更容易编写和理解。
Hooks：useState、useEffect 和 useContext 等强大的工具带来了高级功能。
性能：与类组件相比轻量级。
测试：更容易测试和调试。

限制

在引入 Hooks 之前依赖第三方解决方案进行状态和生命周期处理。

5.类组件：优点和局限性

优点

状态和生命周期：对管理状态和生命周期方法的内置支持。
旧版兼容性：对于 Hooks 之前的较旧 React 项目至关重要。

限制

详细：需要更多样板代码（例如构造函数、this 绑定）。
性能：由于其开销和类结构，稍微慢一些。
过时的实践：随着功能组件主导现代开发，它变得不那么常见。

6.管理状态和生命周期

在功能组件中

React Hooks 提供对功能组件中的状态和生命周期方法的访问。

使用 useState 作为状态：

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

登录后复制

使用 useEffect 进行生命周期：

import React, { Component } from "react";

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

登录后复制

类组件

状态和生命周期方法是内置的，但需要更多样板。

管理状态：

  const Counter = () => {
    const [count, setCount] = React.useState(0);

    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };

登录后复制

生命周期方法：

  const Timer = () => {
    React.useEffect(() => {
      console.log("Component Mounted");
      return () => console.log("Component Unmounted");
    }, []);

    return <p>Timer is running...</p>;
  };

登录后复制