关于react-hooks:react-hooks轮播图

// 用于记录轮播图的以后激活序号  const [activeId, setActiveId] = useState(0);// 用于管制轮播图的位移const [position, setPosition] = useState(0);// 用于管制自动播放const [autoPlayFlag, setAutoPlayFlag] = useState(true);let timer = useRef()const runTimer = () => {    timer.current = setInterval(() => {        // 这时候的num因为闭包的起因，始终是0，所以这里不能间接用setActiveId(activeId-1)        setActiveId(n => {            if (n > 3) {                return 0            } else {                return n+1            }        })    },5000)}useEffect(() => {    runTimer()    return () => {        // 组件销毁时，革除定时器        if (timer.current)        clearInterval(timer.current)    }},[autoPlayFlag])const handleClick = (idx:number) => {    clearInterval(timer.current)    setActiveId(idx)}useEffect(() => {    if (!timer.current) {        runTimer()    }    setPosition(721 * activeId)},[activeId])const slides = suitableList.map((slideContent:any, i) =>    <div        key={`customize_suit_${slideContent.id}_${i}`}        className={sty.swiperImgBox}>        <div className={sty.swiperImg}             style={{background:                     `url(${slideContent.url}) no-repeat center / cover`}}>        </div>    </div>);// 款式不贴了，父级宽度100%，inner宽度3605px（721乘以5）return <div className={sty.suitableCntBoxRight}>                <div className={sty.suitableCntBoxRightInner} style={{left: `-${position}px`}}>                    {slides}                </div>            </div>