面试题：React中函数组件与类组件在状态管理上的主要区别

Question

请详细阐述React函数组件和类组件在状态管理方面存在哪些不同点，例如状态的初始化、更新方式等，并举例说明。

Answer 1

状态初始化

• 函数组件：使用 useState Hook 进行状态初始化。例如：

import React, { useState } from 'react';

const FunctionComponent = () => {
    const [count, setCount] = useState(0);
    return <div>{count}</div>;
};

这里通过 useState(0) 初始化 count 状态为 0 。

• 类组件：在 constructor 中初始化状态。例如：

import React, { Component } from 'react';

class ClassComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    render() {
        return <div>{this.state.count}</div>;
    }
}

在 constructor 中通过 this.state = { count: 0 } 初始化 count 状态。

状态更新方式

• 函数组件：通过 useState 返回的更新函数更新状态。例如：

import React, { useState } from 'react';

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

setCount 函数用于更新 count 状态。

• 类组件：使用 this.setState 方法更新状态。例如：

import React, { Component } from 'react';

class ClassComponent extends 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>
        );
    }
}

通过 this.setState 方法更新 count 状态。

状态更新机制差异

• 函数组件：useState 的更新是替换式的，直接用新值替换旧值。例如 setCount(newValue) 就是直接把 count 替换为 newValue。
• 类组件：this.setState 是合并式的，会把新的状态和旧的状态合并。例如 this.setState({ key: 'newValue' }) 不会覆盖其他状态，而是和其他状态合并。例如原状态 { key1: 'value1', key2: 'value2' }，执行 this.setState({ key1: 'newValue1' }) 后状态变为 { key1: 'newValue1', key2: 'value2' }。

对副作用的处理

• 函数组件：使用 useEffect Hook 处理副作用，例如数据获取、订阅等。例如：

import React, { useState, useEffect } from 'react';

const FunctionComponent = () => {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetch('api/data')
          .then(response => response.json())
          .then(result => setData(result));
    }, []);
    return <div>{data? <p>{data.message}</p> : 'Loading...'}</div>;
};

useEffect 第二个参数为空数组时，只在组件挂载时执行一次。

• 类组件：在 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法中处理副作用。例如：

import React, { Component } from 'react';

class ClassComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null
        };
    }
    componentDidMount() {
        fetch('api/data')
          .then(response => response.json())
          .then(result => this.setState({ data: result }));
    }
    render() {
        return <div>{this.state.data? <p>{this.state.data.message}</p> : 'Loading...'}</div>;
    }
}

componentDidMount 在组件挂载后执行，用于处理副作用操作。