react hooks

hooks就是爲了增強函數式組件的功能   內部狀態    生命週期  邏輯複用  副作用 等...

usestate()爲函數式組件引入了狀態的機制

useEffect()  管理副作用 

     副作用：

        異步請求

        訂閱事件

        變更DOM

useEffect(()=>{     //componentDidUpdate()
...
})

useEffect(()=>{ 
  ...               //componentDidMount()

  return ()=>{
  ...               //componentWillUnmount()
  }
},[])

useEffect（）會在副作用結束後延遲一段時間執行（非同步執行）與 componentDidMount()  componentDidUpdate()有本質區別，在處理DOM變更時會有麻煩   用useLayoutEffect()代替

useLayoutEffect()

 

自定義hooks

實例：監聽組件掛載時間的hooks

const useTimer=()=>{
  const [duration,setDuration]=useState(0)

  useEffect(()=>{ 
    const mountTime=performance.now()
    const timer=setInterval(()=>{
      setDuration(performance.now()- mountTime)
    },1000)
    return ()=>{
       clearInterval(timer)
       const unmountTime=performance.now()
       const duration =unmountTime-mountTime
       setDuration(duration)   
  },[])

  return duration
}