当前位置：首页 > article >正文

react中得类组件和函数组件有啥区别，怎么理解这两个函数

article 2025/1/12 8:57:19

在 React 中，类组件和函数组件是两种创建组件的方式，它们之间有一些重要的区别。以下是对这两种组件的理解和比较：

1. 定义方式

类组件：使用 ES6 的类来定义，必须继承自 React.Component。

class MyClassComponent extends React.Component {
    render() {
        return <div>Hello from Class Component</div>;
    }
}

函数组件：使用普通的 JavaScript 函数来定义，返回 JSX。

function MyFunctionComponent() {
    return <div>Hello from Function Component</div>;
}

2. 状态管理

类组件：可以使用 this.state 来管理组件的状态，并通过 this.setState() 来更新状态。

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

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

函数组件：在 React 16.8 之后，可以使用 Hooks（如 useState）来管理状态。

import React, { useState } from 'react';

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

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>{count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

3. 生命周期方法

类组件：可以使用生命周期方法（如 componentDidMount, componentDidUpdate, componentWillUnmount）来处理组件的生命周期。

函数组件：使用 useEffect Hook 来处理副作用，相当于类组件的生命周期方法。

import React, { useEffect } from 'react';

function MyFunctionComponent() {
    useEffect(() => {
        // 组件挂载时执行
        console.log('Component mounted');

        // 组件卸载时执行
        return () => {
            console.log('Component unmounted');
        };
    }, []); // 空数组表示只在挂载和卸载时执行

    return <div>Hello from Function Component</div>;
}