React useEffect與生命周期鉤子函數的對應關系

在React的函數組件中，useEffect的作用其實也對標了類組件中的生命周期，它的四種使用格式也與生命周期的四種鉤子函數形成著對應關系。

使用格式一：不帶參數的情況

?執行時機：（1）初始執行 （2）每次頁面更新之后都要執行

    useEffect( () => {
    //執行函數
     })

對應關系：componentDidMount + componentDidUpdate

使用格式二：帶第二個參數，參數為空數組

?執行時機：只執行第一次（初始執行）

    useEffect( () => {
    //執行函數
     }, [] )

對應關系：componentDidMount

使用場景：事件綁定、發起ajax請求

使用格式三：帶第二個參數，并且指定了依賴項

?執行時機：只執行第一次（初始執行）

    useEffect( () => {
    //執行函數
     }, [] )

對應關系：componentDidMount

使用場景：事件綁定、發起ajax請求

使用格式四：依賴項為空,沒有具體的副作用函數.但是有副作用函數的清理函數.

?執行時機：組件銷毀時

    useEffect( () => {
      return () => { 清理函數 }
     }, [] )

對應關系：componentWillUnMount

使用場景：組件銷毀時,清除遺留的事件綁定和定時器.

React函數式組件用useEffect模擬三個生命周期鉤子函數

首先我們知道在React中的函數式組件是沒有生命周期的，那我們想在函數式組件中實現class組件中生命周期鉤子函數的效果應該怎么操作呢？

這里就得用到一個hooks來模擬鉤子函數，這個hooks就是useEffect，這個useEffect可以模擬三個鉤子函數，分別是componentDidMount，componentWillUnmount和componentDidUpdate。

先貼代碼為敬

React.useEffect(() => {
?? ?console.log("這是模擬componentDidMount鉤子函數")
?? ?return () => {//return出來的函數本來就是更新前，銷毀前執行的函數，現在不監聽任何狀態，所以只在銷毀前執行
?? ??? ?console.log("這是模擬componentWillUnmount鉤子函數")
?? ?}
},[])//第二個參數一定是一個空數組，因為如果不寫會默認監聽所有狀態，這樣寫就不會監聽任何狀態，只在初始化時執行一次。

通過上面這種寫法就可以同時模擬componentDidMount和componentWillUnmount鉤子函數。接下來說componentDidUpdate

//在此之前需要使用useRef這個hooks
const flag = React.useRef(null)
React.useEffect(() => {
?? ?if(!flag.current){
?? ??? ?flag.current = true
?? ?} else {
?? ??? ?console.log("更新了")
?? ?}
})

在這里我們沒有傳第二個參數，也就是說他默認監聽所有狀態，只要有狀態發生改變，他就會執行，但又有一個問題，他初始化的時候也會執行，為了解決這樣的問題我們采用了useRef作為標記，初始化的時候flag.current肯定為false，所以我們將它設置成true，所以他就不會初始化執行了。

看到這里我想有一些小伙伴可能有這樣的疑問，就是為什么用useRef，定義一個全局變量不香嗎？是，如果你這個組件在一個頁面只用一次那就沒問題，但組件就是為了復用的，試想一下，在同一頁面中你使用了兩次這樣的組件，第一個組件就沒問題，但第二個組件就會初始化執行，因為在全局變量中的flag已經被第一個組件修改成了true，而useRef卻不會，他是屬于組件內部的，不會受到干擾。?