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>
 )
}

原文地址：http://www.cnblogs.com/strundent/p/16903820.html