React-useEffect轮播

第零步：导入
import React,{useState,useEffect} from "react"
第一步： 创建函数组件:
export default function Banner(){
第二步： 改变状态:
const [n,setN] = useState(0)//改变数值
const [img,setImg] = useState([require('../../xx.jpg')])//改变图片
第五步： 挂载-更新-销毁
useEffect(()=>{
//挂载：
const timer = setInterval(()=>{
     //更新：
     setN(v=>{
        if(v==img.length-1){
             return 0;
            };
         return v+1
       })
},2000)
 //销毁：
return ()=>clearInterval(this.timer);
 
},[n,img])//重新订阅，重新调用
第四步： 复用遍历图片（处理显示和隐藏）
const imgList =  img.map((v,i)=>{
                      <img key={i} src={v} style={{display:(i==n)?'block':'none'}} />
                  })
         （处理轮播li切换）
const liList = img.map((v,i)=>{
                    <li key={i} className={i==n?'selected':''}>
                  })
第三步： 返回要展示的内容:
return (
        <div className="banner">
            <div className="banner-img">
              第四步：复用:
              {
                imgList 
               }
            </div>
            <ul>
               {
                  liList 
                }
            </ul>
        </div>
 )
}
 

__EOF__

本文作者：Sternstunde
本文链接：https://www.cnblogs.com/strundent/p/16903820.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！