面试题：React中useDebugValue在复杂业务场景下的应用

安装依赖：确保项目中安装了React。如果使用create - react - app创建项目，这一步通常已完成。
创建自定义Hook：

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

const useMultiStepForm = () => {
    const [currentStep, setCurrentStep] = useState(0);
    const [isValid, setIsValid] = useState(false);

    const validateStep = (step) => {
        // 复杂的验证逻辑
        let isValidStep = true;
        // 示例：根据不同步骤进行不同验证
        if (step === 0) {
            // 比如验证某个输入框是否为空
            const inputValue = "exampleInput";
            if (inputValue === "") {
                isValidStep = false;
            }
        }
        return isValidStep;
    };

    const nextStep = () => {
        const isValidNext = validateStep(currentStep + 1);
        if (isValidNext) {
            setCurrentStep(currentStep + 1);
        }
    };

    const prevStep = () => {
        setCurrentStep(currentStep - 1);
    };

    useEffect(() => {
        const stepValid = validateStep(currentStep);
        setIsValid(stepValid);
    }, [currentStep]);

    // 使用useDebugValue添加调试信息
    useDebugValue(`当前步骤: ${currentStep}, 是否有效: ${isValid}`);

    return {
        currentStep,
        isValid,
        nextStep,
        prevStep
    };
};

export default useMultiStepForm;

在组件中使用自定义Hook：

import React from'react';
import useMultiStepForm from './useMultiStepForm';

const MultiStepForm = () => {
    const { currentStep, isValid, nextStep, prevStep } = useMultiStepForm();

    return (
        <div>
            <p>当前步骤: {currentStep}</p>
            <p>步骤是否有效: {isValid? '是' : '否'}</p>
            <button onClick={prevStep} disabled={currentStep === 0}>上一步</button>
            <button onClick={nextStep} disabled={!isValid}>下一步</button>
        </div>
    );
};

export default MultiStepForm;

让调试信息更有针对性和可读性：
- 明确当前状态：在useDebugValue中，像示例那样明确指出当前步骤和该步骤是否有效。这样开发者在调试时能快速了解表单在某一时刻的状态。
- 添加更多细节：如果验证逻辑依赖于某些特定的输入值，可以在调试信息中包含这些值。例如，如果步骤0验证依赖于用户名输入，可改为useDebugValue(当前步骤: ${currentStep}, 是否有效: ${isValid}, 用户名: ${username});
- 步骤特定描述：如果每个步骤有独特的验证规则，可以在调试信息中简要描述。如useDebugValue(当前步骤: ${currentStep}, 是否有效: ${isValid}, 步骤验证: 邮箱格式是否正确);

星途面试题库

面试题：React中useDebugValue在复杂业务场景下的应用

知识考点

面试题答案