如何用React Helmet实现Alert状态下Favicon的闪烁效果？

问题背景 #

现有React项目通过按钮切换alert状态，控制Favicon显示橙色或灰色SVG。需求是当alert为true时，让Favicon在橙色和灰色之间自动闪烁切换。之前尝试用GIF格式，但仅Firefox支持动态Favicon，现在想通过setInterval实现但不清楚具体步骤。原代码如下：

import orangeLogo from './src/images/orange-logo.svg'
import grayLogo from './src/images/gray-logo.svg'

const wrapPageElement = ({ element, props }) => {
  const [alert, setAlert] = useState(true)

  return (
    <>
      <Helmet>
        <link rel='icon' type='image' href={alert ? orangeLogo : grayLogo}/>
      </Helmet>
      <Layout {...props}><button onClick={() => setAlert(!alert)}>ALERT</button></Layout> 
    </>
  )
}
export { wrapPageElement }

解决方案 #

要实现闪烁效果，需要新增一个状态控制当前显示的图标，并通过useEffect管理定时器（避免内存泄漏），具体实现如下：

import { useState, useEffect } from 'react'
import orangeLogo from './src/images/orange-logo.svg'
import grayLogo from './src/images/gray-logo.svg'

const wrapPageElement = ({ element, props }) => {
  const [alert, setAlert] = useState(true)
  // 新增状态：实时控制当前显示的图标
  const [currentFavicon, setCurrentFavicon] = useState(orangeLogo)

  useEffect(() => {
    let intervalId
    // alert为true时启动定时器，切换图标
    if (alert) {
      intervalId = setInterval(() => {
        setCurrentFavicon(prev => prev === orangeLogo ? grayLogo : orangeLogo)
      }, 500) // 500ms切换一次，可自行调整闪烁速度
    } else {
      // alert为false时恢复灰色图标，并清除定时器
      setCurrentFavicon(grayLogo)
      clearInterval(intervalId)
    }

    // 组件卸载或alert状态变化时，清理定时器防止内存泄漏
    return () => clearInterval(intervalId)
  }, [alert]) // 依赖alert状态，状态变化时重新执行逻辑

  return (
    <>
      <Helmet>
        {/* 改用currentFavicon控制显示的图标 */}
        <link rel='icon' type='image' href={currentFavicon}/>
      </Helmet>
      <Layout {...props}>
        <button onClick={() => setAlert(!alert)}>ALERT</button>
      </Layout> 
    </>
  )
}
export { wrapPageElement }

关键说明 #

• 定时器管理：通过useEffect的依赖项alert，确保只有在alert为true时才启动定时器，状态切换时自动清理
• 状态更新逻辑：使用函数式更新setCurrentFavicon(prev => ...)，保证每次切换都是基于上一次的状态值，避免更新异常
• 闪烁速度调整：修改setInterval的第二个参数（单位毫秒），可以自定义图标的切换频率

内容的提问来源于stack exchange，提问作者Marc Maravilla-Louie