React 组件 (功能组件)

**功能组件**

功能组件是一个 JavaScript 函数，它：

通过 props 接受输入并返回 HTML（JSX）。

仅关注呈现 UI 即可简化开发。

**功能组件示例：**

**Greet.jsx**

function Greet() {
    return Hello Damilare;
}

export default Greet;

**App.jsx**

import React from "react";
import Greet from "./Components/Greet.jsx";

function App() {
    return (
        
            
        
    );
}

export default App;

**类组件**

类组件是一个 JavaScript 类，它：

通过 props 接受输入并维护内部的私有状态。

包含一个返回 HTML（JSX）的 render() 方法。

**类组件示例：**

import React, { Component } from "react";

class Welcome extends Component {
    render() {
        return Class Component;
    }
}

export default Welcome;

**App.jsx 中的用法：**

import React from "react";
import Welcome from "./Components/Welcome.jsx";

function App() {
    return (
        
            
        
    );
}

export default App;

**比较：函数式组件与类组件**

**功能组件**

返回 JSX 的 JavaScript 函数。

默认无状态；使用钩子（例如 useState、useEffect）来控制状态。

简单并且非常适合以 UI 为中心的逻辑。

关键字‘this’不是必需的。

轻量级性能并在现代 React 中进行了优化。

非常适合可重复使用/展示组件。

**类组件**

扩展 Component 的 JavaScript 类。

无需钩子即可管理内部状态。

最适合复杂逻辑或有状态的 UI。

需要它来引用属性/方法。

在现代 React 中更重且不太受欢迎。

更适合智能/容器组件。

每种类型的优点

`功能组件`

更容易书写和理解。

无需处理此关键字。

非常适合不需要状态管理的组件。

更简洁，更易于测试。

借助 React Hooks，功能组件现在可以处理状态和副作用，从而弥合与类组件之间的差距。

`类组件`

可以保持私有的内部状态。

对于管理复杂的逻辑和组件生命周期很有用。

最适合尚未使用钩子的旧 React 项目。

**您应该使用功能组件还是类组件？**

在现代 React（v16.8 之后）中，功能组件是首选，因为：

React Hooks（如 useState 和 useEffect）使得功能组件在状态和生命周期管理方面具有同样强大的功能。

功能组件更易于阅读、编写和调试。

它们提供更好的性能，特别是在渲染方面。

**关键要点：**

尽可能使用功能组件，尤其是在新项目中。

仅当您使用遗留代码或需要功能组件中不可用的特定功能时才使用类组件（现在很少出现这种情况）。

CLIS.CC

React 组件 (功能组件)

React 组件 (功能组件)

Hello Damilare

Class Component

每种类型的优点