React：如何为状态变量的显示更新添加延迟与动画效果

要实现你描述的延迟更新+过渡效果，最符合React风格的方式是让子组件内部维护显示状态，配合CSS过渡动画，完全不需要直接操作DOM。核心思路是：当父组件传入的number变化时，子组件先执行淡出动画，等待动画结束后更新显示值，再执行淡入动画。

具体实现步骤： #

• 在DisplayNumber组件内部，用useState维护当前要显示的数值（和父组件传入的number解耦）
• 用useEffect监听父组件传入的number变化，触发动画流程
• 用CSS定义透明度过渡的动画类，通过组件状态切换类名来触发动画

修改后的完整代码： #

import { useEffect, useState } from 'react';
import './App.css'; // 需要创建对应的CSS文件

export default function App(){
    const [number, setNumber] = useState(0)

    function handleSubmit(e){
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const formJson = Object.fromEntries(formData.entries());
        setNumber(Number(formJson.number)); // 转成数字类型避免字符串匹配问题
    }

    return (
        <div className='App'>
            <form method='post' onSubmit={handleSubmit}>
                New number: <input type='number' name='number' defaultValue={0}/>
                <button type='submit'>update</button>
            </form>
            <h2>Current number is: <DisplayNumber number={number}/> </h2>
        </div>
    );
}

function DisplayNumber({number}) {
    // 内部维护实际显示的数值，初始值和传入的number一致
    const [displayValue, setDisplayValue] = useState(number);
    // 控制动画状态：idle（正常显示）→ fadingOut（淡出）→ fadingIn（淡入）
    const [animationState, setAnimationState] = useState('idle');

    useEffect(() => {
        // 当传入值和当前显示值一致时，不触发动画
        if (number === displayValue) return;

        // 第一步：触发淡出动画
        setAnimationState('fadingOut');
        
        // 等待淡出动画完成（0.5s）后，更新显示值并触发淡入
        const timer = setTimeout(() => {
            setDisplayValue(number);
            setAnimationState('fadingIn');
            // 淡入完成后回到正常状态
            setTimeout(() => setAnimationState('idle'), 500);
        }, 500);

        // 清理定时器，避免组件卸载时的内存泄漏
        return () => clearTimeout(timer);
    }, [number, displayValue]);

    // 根据动画状态拼接类名
    const className = `number ${animationState}`;

    return <span className={className}>{displayValue}</span>
}

对应的App.css样式： #

.number {
    transition: opacity 0.5s ease;
}

.number.fadingOut {
    opacity: 0;
}

.number.fadingIn {
    opacity: 1;
}

.number.idle {
    opacity: 1;
}

关键细节说明： #

• 子组件内部的displayValue负责实际渲染内容，和父组件的number解耦，以此控制更新时机
• animationState通过切换CSS类触发过渡动画，完全遵循React声明式状态管理的风格
• 两层setTimeout分别控制淡出等待和淡入后的状态重置，配合useEffect的清理函数避免内存泄漏
• 将formJson.number转为数字类型，避免字符串与数字类型不匹配导致的重复触发问题

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