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

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

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

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

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

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

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

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

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

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

使用場(chǎng)景：事件綁定、發(fā)起ajax請(qǐng)求

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

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

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

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

使用場(chǎng)景：事件綁定、發(fā)起ajax請(qǐng)求

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

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

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

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

使用場(chǎng)景：組件銷毀時(shí),清除遺留的事件綁定和定時(shí)器.

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

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

這里就得用到一個(gè)hooks來模擬鉤子函數(shù)，這個(gè)hooks就是useEffect，這個(gè)useEffect可以模擬三個(gè)鉤子函數(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ù)")
?? ?}
},[])//第二個(gè)參數(shù)一定是一個(gè)空數(shù)組，因?yàn)槿绻粚憰?huì)默認(rèn)監(jiān)聽所有狀態(tài)，這樣寫就不會(huì)監(jiān)聽任何狀態(tài)，只在初始化時(shí)執(zhí)行一次。

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

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

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

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

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

最新評(píng)論