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

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

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

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

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

對應關系：componentDidMount + componentDidUpdate

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

 執(zhí)行時機：只執(zhí)行第一次（初始執(zhí)行）

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

對應關系：componentDidMount

使用場景：事件綁定、發(fā)起ajax請求

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

 執(zhí)行時機：只執(zhí)行第一次（初始執(zhí)行）

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

對應關系：componentDidMount

使用場景：事件綁定、發(fā)起ajax請求

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

 執(zhí)行時機：組件銷毀時

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

對應關系：componentWillUnMount

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

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

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

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

先貼代碼為敬

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

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

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

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

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論