面试题：React Hooks在复杂状态管理中的应用对比类组件生命周期

使用类组件生命周期实现思路

状态管理：在类组件的 constructor 中初始化状态，例如多步骤表单每个步骤所需的数据。

class MultiStepForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            step: 1,
            step1Data: '',
            step2Data: ''
        };
    }
}

步骤切换：通过 setState 方法更新 step 状态来切换步骤。

handleStepChange = (newStep) => {
    this.setState({ step: newStep });
};

共享和更新状态：在不同步骤的表单提交或数据输入时，通过 setState 更新相应的状态字段。

handleStep1Submit = (data) => {
    this.setState({ step1Data: data, step: 2 });
};

副作用操作：利用 componentDidUpdate 生命周期方法，在特定步骤数据变化时执行副作用。

componentDidUpdate(prevProps, prevState) {
    if (prevState.step1Data!== this.state.step1Data && this.state.step === 2) {
        // 执行副作用操作，例如发送网络请求
        console.log('Step 1 data changed, perform side effect');
    }
}

使用React Hooks实现思路

状态管理：使用 useState Hook 初始化和更新状态。

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

const MultiStepForm = () => {
    const [step, setStep] = useState(1);
    const [step1Data, setStep1Data] = useState('');
    const [step2Data, setStep2Data] = useState('');
};

步骤切换：通过调用 setStep 来切换步骤。

const handleStepChange = (newStep) => {
    setStep(newStep);
};

共享和更新状态：在表单提交或数据输入时，调用相应的 setState 函数更新状态。

const handleStep1Submit = (data) => {
    setStep1Data(data);
    setStep(2);
};

副作用操作：使用 useEffect Hook，通过依赖数组控制副作用的触发。

useEffect(() => {
    if (step === 2 && step1Data!== '') {
        // 执行副作用操作，例如发送网络请求
        console.log('Step 1 data changed, perform side effect');
    }
}, [step, step1Data]);

优劣分析

代码结构
- 类组件：代码结构相对复杂，生命周期方法和逻辑分散在不同的函数中，可能导致代码冗长。例如 constructor 用于初始化状态，componentDidUpdate 用于副作用，不同逻辑分散。
- React Hooks：代码结构更简洁直观，逻辑通过 Hooks 组合在一起，每个 useState 和 useEffect 清晰地定义了状态和副作用逻辑。例如在一个函数组件内，状态和副作用紧密相关的逻辑可以写在一起。
性能优化
- 类组件：性能优化较复杂，需要使用 shouldComponentUpdate 等方法手动控制组件更新，并且容易出现误判导致不必要的渲染。例如在复杂状态变化时，精确判断哪些状态变化需要重新渲染较困难。
- React Hooks：性能优化相对容易，useEffect 的依赖数组可以精确控制副作用的触发时机，useMemo 和 useCallback 可以更细粒度地控制函数和值的缓存，减少不必要的渲染。例如通过设置依赖数组，只有依赖项变化时才触发副作用。
可维护性
- 类组件：可维护性较差，随着组件逻辑的增加，生命周期方法和状态管理的耦合度增加，代码难以理解和修改。例如在大型项目中，类组件的多个生命周期方法相互影响，排查问题较困难。
- React Hooks：可维护性更好，逻辑以 Hooks 为单位组织，易于复用和测试。例如可以将通用的状态管理和副作用逻辑封装成自定义 Hooks，方便在多个组件中使用。

星途面试题库

面试题：React Hooks在复杂状态管理中的应用对比类组件生命周期

知识考点

面试题答案

使用类组件生命周期实现思路

使用React Hooks实现思路

优劣分析