React useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系

在React的函數(shù)組件中，useEffect的作用其實也對標了類組件中的生命周期，它的四種使用格式也與生命周期的四種鉤子函數(shù)形成著對應(yīng)關(guān)系。

使用格式一：不帶參數(shù)的情況

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

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

對應(yīng)關(guān)系：componentDidMount + componentDidUpdate

使用格式二：帶第二個參數(shù)，參數(shù)為空數(shù)組

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

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

對應(yīng)關(guān)系：componentDidMount

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

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

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

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

對應(yīng)關(guān)系：componentDidMount

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

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

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

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

對應(yīng)關(guān)系：componentWillUnMount

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

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

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

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

先貼代碼為敬

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

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

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

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

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

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

最新評論