如何使用React实现带自动播放、悬浮暂停且末图不失效的轮播组件

import React,{useState, useEffect, useRef} from 'react'
import { sliderData } from './sliderData'
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import "./SlideShow.css"
export default function SlideShow() {
    const [currentImg,setCurrentImg] = useState(0)
    // 存储定时器id，避免重复创建定时器
    const timerRef = useRef(null)
    // 自动切换间隔，单位毫秒，可根据需求调整
    const AUTO_SWITCH_DELAY = 3000

    // 空数据兼容，避免崩溃
    if (!sliderData || sliderData.length === 0) return <div>暂无轮播内容</div>

    // 下一张切换，边界自动循环
    const goNext = () => {
        setCurrentImg(prev => prev === sliderData.length - 1 ? 0 : prev + 1)
    }

    // 上一张切换，边界自动循环
    const goPrev = () => {
        setCurrentImg(prev => prev === 0 ? sliderData.length - 1 : prev - 1)
    }

    // 启动自动播放
    const startAutoPlay = () => {
        if (timerRef.current) return
        timerRef.current = setInterval(goNext, AUTO_SWITCH_DELAY)
    }

    // 暂停自动播放
    const pauseAutoPlay = () => {
        if (timerRef.current) {
            clearInterval(timerRef.current)
            timerRef.current = null
        }
    }

    // 组件挂载启动自动播放，卸载清除定时器防止内存泄漏
    useEffect(() => {
        startAutoPlay()
        return () => pauseAutoPlay()
    }, [])

    return (
         <div >
            <h3>SlideShow</h3>
             <div 
                className="slideshow" 
                onMouseEnter={pauseAutoPlay}
                onMouseLeave={startAutoPlay}
             >
              <div className="slider" style={{backgroundImage:`url(${sliderData[currentImg].image})`}}>
                   <div className="left"><ArrowBackIosIcon onClick={goPrev}/></div>
                    <div className="center"></div>
                    <div className="right"><ArrowForwardIosIcon onClick={goNext}/></div>
                   </div>
             </div>
          </div>
       )
    }

功能说明 #

• 边界异常处理：切换逻辑加入循环判断，最后一张点下一张自动回到第一张，第一张点上一张自动跳转到最后一张，不会出现下标越界崩溃问题，同时增加空数据兼容逻辑，轮播数据为空时也不会报错
• 自动播放：通过setInterval实现定时自动切换，用useRef存储定时器id避免重复创建定时器，组件卸载时自动清除定时器防止内存泄漏
• 悬浮暂停：给轮播外层容器绑定鼠标进出事件，鼠标移入轮播区域自动暂停播放，鼠标移出后恢复自动播放

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