模态框步进器组件ChangeHandler触发频繁重渲染问题求助

我在Modal里实现了一个步进器组件，每个步骤对应独立子组件，用switch case渲染对应步骤的组件这部分没问题，但现在遇到一个问题：每次在输入框输入内容时，组件都会重复渲染。我已经把状态提升到上层作为props传递，但问题还是存在。

父组件ContactModal代码： #

export function ContactModal(props) {
    const [step, setStep] = useState(0)
    let stepArray = [1, 2, 3, 4, 5, 6]


    const handleNextStep = () => {
        const nextStep = step + 1;
        if (step === 1) {
            let checked = document.querySelectorAll('input[type=checkbox]:checked').length
            if (!checked) {
                alert("You must check at least one checkbox.")
            } else {
                setStep(nextStep)
            }
        } else {
            setStep(nextStep)
        }
    }
    const handleBackStep = () => {
        const back = step - 1;
        setStep(back)
    }
    const inputHandler = (event) => {
        event.preventDefault()
        props.setData((prevState) => ({
            ...prevState,
            [event.target.name]: event.target.value,
        }));
    };

    const checkboxHandler = (event) => {

        let savedData;
        savedData = {
            ...props.data,
            [event.target.name]: event.target.checked,
        };
        props.setData(savedData)

    };

    const handleChangeTimepicker = (newValue, name) => {
        props.setData({...props.data, [name]: new Date(newValue)});
    };

    let CurrentStep;

    switch (step) {
        case 0:
            CurrentStep = () => (
                <RequestProject nextStep={handleNextStep} onHide={props.onHide} step={step} setStep={setStep} />
            );
            break;
        case 1:
            CurrentStep = () => (
                <Step1 checkboxHandler={checkboxHandler} nextStep={handleNextStep} data={props.data} />
            );
            break;
        case 2:
            CurrentStep = () => (
                <Step2 handleChangeTimepicker={handleChangeTimepicker} data={props.data} nextStep={handleNextStep} />
            );
            break;
        case 3:
            CurrentStep = () => (
                <Step3 checkboxHandler={checkboxHandler} nextStep={handleNextStep} data={props.data} />
            );
            break;
        case 4:
            CurrentStep = () => (
                <Step4 inputHandler={inputHandler} nextStep={handleNextStep} data={props.data} setData={props.setData} />
            );
            break;
        default:
            CurrentStep = null;
    }


    return (
        <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
            {step > 0 && (
                <Modal.Header className="d-flex justify-content-between align-items-center border-bt-none w-100  px-5">
                    <p onClick={handleBackStep} className="text-md m-0 cursor-pointer text-primary">
                        <IoIosArrowBack />Back
                    </p>
                    <StepperDots stepArray={stepArray} step={step} />
                    <p onClick={props.onHide} className="text-md m-0 cursor-pointer text-primary">
                        Close
                    </p>
                </Modal.Header>
            )}
            <Modal.Body>
                {CurrentStep && <CurrentStep />}
            </Modal.Body>
        </Modal>

    )
}

子组件Step4代码： #

export function Step4({nextStep, data, setData}) {

    const changeHandler = useCallback((event) => {
        const {name, value} = event.target;
        setData((prevState) => ({
            ...prevState,
            [name]: value,
        }));
    }, [setData]);

    return (
        <>
            <div className="d-flex flex-column align-items-center justify-content-center h-100">
                <h4 className="mb-3 w-50 text-center">About your company</h4>
                <Form className="my-5">
                    <Form.Group className="mb-3">
                        <Form.Label>Your Name <span className="text-gray">(optional)</span></Form.Label>
                        <Form.Control onChange={changeHandler} type="text" value={data.name} name="name"/>
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Your Company Name <span className="text-gray">(optional)</span></Form.Label>
                        <Form.Control onChange={changeHandler} type="text" value={data.companyName} name="companyName"/>
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Your Website/Instagram </Form.Label>
                        <Form.Control onChange={changeHandler} type="text" value={data.website} name="website"/>
                    </Form.Group>
                </Form>

                <button onClick={nextStep} className="btn text-white mt-5">Next</button>
            </div>
        </>
    );
}

问题根源 #

1. 动态创建函数组件：父组件中CurrentStep每次渲染都会被重新定义为新的匿名函数组件，导致组件身份变化，触发强制重渲染。
2. 未缓存的handler函数：父组件中的各类处理函数（如inputHandler、checkboxHandler）每次渲染都会重新创建，作为props传递给子组件后，会触发子组件的不必要重渲染。
3. 状态更新依赖当前值而非函数式更新：部分handler直接依赖props.data的当前值，不仅可能导致状态更新错误，还会增加不必要的依赖项，引发重渲染。

具体修复步骤 #

1. 移除动态函数组件的创建

将父组件中switch语句里的CurrentStep从“返回组件的函数”改为直接赋值组件实例：

// 原写法
case 4:
    CurrentStep = () => (
        <Step4 inputHandler={inputHandler} nextStep={handleNextStep} data={props.data} setData={props.setData} />
    );
    break;

// 修改后
case 4:
    CurrentStep = <Step4 inputHandler={inputHandler} nextStep={handleNextStep} data={props.data} setData={props.setData} />;
    break;

同时修改Modal.Body的渲染逻辑：

// 原写法
{CurrentStep && <CurrentStep />}

// 修改后
{CurrentStep}

2. 用useCallback缓存所有handler函数

给父组件中的处理函数包裹useCallback，避免每次渲染重新创建函数：

import { useState, useCallback } from 'react';

export function ContactModal(props) {
    const [step, setStep] = useState(0)
    let stepArray = [1, 2, 3, 4, 5, 6]

    const handleNextStep = useCallback(() => {
        const nextStep = step + 1;
        if (step === 1) {
            const checked = document.querySelectorAll('input[type=checkbox]:checked').length
            if (!checked) {
                alert("You must check at least one checkbox.")
            } else {
                setStep(nextStep)
            }
        } else {
            setStep(nextStep)
        }
    }, [step]);

    const handleBackStep = useCallback(() => {
        // 改用函数式更新，避免依赖当前step值
        setStep(prev => prev - 1);
    }, []);

    const inputHandler = useCallback((event) => {
        event.preventDefault()
        props.setData((prevState) => ({
            ...prevState,
            [event.target.name]: event.target.value,
        }));
    }, [props.setData]);

    const checkboxHandler = useCallback((event) => {
        // 改用函数式更新，避免依赖props.data
        props.setData(prevState => ({
            ...prevState,
            [event.target.name]: event.target.checked,
        }));
    }, [props.setData]);

    const handleChangeTimepicker = useCallback((newValue, name) => {
        // 改用函数式更新，避免依赖props.data
        props.setData(prevState => ({
            ...prevState,
            [name]: new Date(newValue)
        }));
    }, [props.setData]);

    // ... 其余switch逻辑按步骤1修改
}

3. 用memo包裹子组件

给子组件（如Step4）添加React.memo，让子组件仅在props真正变化时才重渲染：

import { memo, useCallback } from 'react';

export const Step4 = memo(({nextStep, data, setData}) => {
    const changeHandler = useCallback((event) => {
        const {name, value} = event.target;
        setData((prevState) => ({
            ...prevState,
            [name]: value,
        }));
    }, [setData]);

    // ... 原返回逻辑不变
});

4. 优化状态更新逻辑

所有依赖旧状态的更新都改用函数式更新（如setStep(prev => prev - 1)），避免闭包陷阱，同时减少依赖项。

内容的提问来源于stack exchange，提问作者Nikola Jamina