面试题：React组件：函数式与类组件的状态管理差异

Question

请阐述在React中，函数式组件和类组件在状态管理方面有哪些不同？并举例说明如何在这两种组件中正确地初始化和更新状态。

Answer 1

状态管理的不同

1. 函数式组件：
   • 早期函数式组件没有自身的状态，被称为无状态组件。随着Hook的出现，函数式组件可以使用useState等Hook来管理状态。状态以变量的形式存在，更新状态通过调用setState函数。它的状态管理更简洁，基于函数式编程思想，没有类的概念，减少了不必要的样板代码。
   • 例如：

import React, { useState } from'react';

const FunctionComponent = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount(count + 1);
    };
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};

export default FunctionComponent;

2. 类组件：
   • 类组件通过this.state来定义和管理状态。状态是一个对象，更新状态需要使用this.setState方法，该方法会合并新的状态到当前状态。类组件的状态管理基于面向对象编程思想，有更多的生命周期方法来处理状态变化等情况。
   • 例如：

import React, { Component } from'react';

class ClassComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
        this.increment = this.increment.bind(this);
    }
    increment() {
        this.setState((prevState) => ({
            count: prevState.count + 1
        }));
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

export default ClassComponent;

初始化和更新状态

1. 函数式组件：
   • 初始化状态：使用useState Hook，传入初始值，如const [count, setCount] = useState(0);，这里0就是count状态的初始值。
   • 更新状态：调用setState函数，如setCount(newValue)，如果依赖之前的状态，可以使用回调形式setCount(prevCount => prevCount + 1)。
2. 类组件：
   • 初始化状态：在constructor方法中，通过this.state = { /* 状态对象 */ };来初始化，例如this.state = { count: 0 };。
   • 更新状态：使用this.setState方法，如this.setState({ count: newValue });，当依赖之前的状态时，使用回调形式this.setState((prevState) => ({ count: prevState.count + 1 })); 。