import { useEffect, useState } from "react"
function Son(){
    // 開啟一個定時器
    useEffect(()=>{
       const timer=  setInterval(()=>{
            console.log("定時器");
        },1000)
        return ()=>{
            clearInterval(timer)
        }
    },[])
    return (
        <>
            <div>這是 son組件
            </div>
        </>
    )
}
function App(){
    // 1.沒有依賴項(xiàng)的時候 初始會觸發(fā) 組件更新會觸發(fā)
    const [count,setCount] = useState(0)
    // useEffect(()=>{
    //     console.log("副作用函數(shù)執(zhí)行與否");
    // })
      // 2.當(dāng)依賴項(xiàng)為空數(shù)組的時候 只會在初始時觸發(fā) 
    //   useEffect(()=>{
    //     console.log("副作用函數(shù)執(zhí)行 []");
    // },[])
    // 3.傳入特定的依賴項(xiàng)  初始時觸發(fā) 依賴項(xiàng)變化時觸發(fā)
     useEffect(()=>{
        console.log("副作用函數(shù)執(zhí)行 []");
    },[count])
    // 4.清除useEffect的副作用 通過在第一個參數(shù)函數(shù)中return一個函數(shù) 清除副作用
    // 最常用的常見就是在組件卸載時自動執(zhí)行
    const [show,setShow] = useState(true)
    return (
        <>
            <div>useEffect的使用 根據(jù)依賴項(xiàng)的不同</div>
            <button onClick={()=>setCount(count+1)}>{count}</button>
            <div>
                {show&&<Son/>}
                <button onClick={()=>setShow(false)}>卸載son組件</button>
            </div>
        </>
    )
}
export default App