React页面因useEffect空白，是否存在无限渲染循环？文本悬停动画问题

架构老林

2026-7-29

问题分析与解决

核心问题：useEffect清理函数类型错误

你当前的useEffect直接返回了setTimeout的返回值（数字类型的定时器ID），但React要求useEffect的清理函数必须是一个函数。React会尝试执行这个返回的数字，引发隐性运行时错误，最终导致组件渲染异常（表现为内容空白）。

修正后的useEffect代码

useEffect(() => {
    const timer = setTimeout(() => {
        setLetterClass('text-animate-hover')
    }, 4000)
    // 返回清理函数，在组件卸载时清除定时器
    return () => clearTimeout(timer)
}, [])

额外样式优化：避免切换后内容隐藏

当letterClass切换为text-animate-hover后，原text-animate类被移除，而text-animate-hover未设置初始透明度。虽然text-animate的animation-fill-mode: forwards会让元素保持动画最后一帧样式，但移除类后动画失效，可能导致元素意外隐藏。可以给text-animate-hover添加默认透明度：

.text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;
    opacity: 1; /* 确保元素默认可见 */

    &:hover{
        animation: rubberBand 1s;
        color: #f67280;
    }
}