欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于useEffect的第二個(gè)參數(shù)解讀

 更新時(shí)間:2022年09月14日 10:33:28   作者:bigHead-  
這篇文章主要介紹了關(guān)于useEffect的第二個(gè)參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

useEffect的第二個(gè)參數(shù)

useEffect規(guī)則

  • 在每次render之后執(zhí)行
  • 接收第二個(gè)參數(shù)來控制跳過執(zhí)行,下次render后如果指定的值沒有變化就不會(huì)執(zhí)行
  • useEffect時(shí)在render之后瀏覽器已經(jīng)渲染結(jié)束才執(zhí)行

第二個(gè)參數(shù)的規(guī)則

  • 它是可選的
  • 類型是一個(gè)數(shù)組

不同值的參數(shù)

  • 不傳參數(shù)
  • 空數(shù)組
  • 一個(gè)值的數(shù)組
  • 多個(gè)值的數(shù)組

示例

1. 沒有第二個(gè)參數(shù)時(shí),組件的初始話和更新都會(huì)執(zhí)行 

const [count, setCount] = useState(0)
useEffect(() => {
    console.log("useEffect:", count)
})

在這里插入圖片描述

2. 空數(shù)組時(shí),初始化調(diào)用一次之后不再執(zhí)行,相當(dāng)于componentDidMount

const [count, setCount] = useState(0)
useEffect(() => {
    console.log("useEffect:", count)
}, [])

在這里插入圖片描述

3. 有一個(gè)值的數(shù)組時(shí),該值有變化就執(zhí)行

4. 有多個(gè)值的數(shù)組時(shí),只要有一個(gè)值有變化就執(zhí)行

const [count1, setCount1] = useState(0)
const [count2, setCount2] = useState(0)
useEffect(() => {
    console.log(count1, count2)
}, [count1, count2])

在這里插入圖片描述

useEffect使用技巧

useEffect如果第二個(gè)參數(shù)的數(shù)組不為空,傳了多個(gè)參數(shù)的情況下,使用總結(jié)。

如果第二個(gè)傳了多個(gè)參數(shù),如何查看是那個(gè)參數(shù)發(fā)生了變化呢?請(qǐng)看代碼:

// 在一個(gè)正常的Hooks函數(shù)中,有如下代碼,此代碼實(shí)現(xiàn)的原理就是通過useRef來達(dá)到緩存的目的
  const [a, setA] = useState();
  const [b, setB] = useState();
  const [c, setC] = useState();
  const myRef = useRef({a, b, c});
  useEffect(() => {
    const { a: prevA, b: prevB, c: prevC } = myRef.current;
    if (prevA !== a) {
      // 證明a發(fā)生了變化
    }
    if (prevB !== b) {
      // 證明b發(fā)生了變化
    }
    if (prevC !== c) {
      // 證明c發(fā)生了變化
    }
  }, [a, b, c])

有時(shí)使用useEffect會(huì)使組件一直處于不停的刷新,這個(gè)是為什么?

看如下代碼,會(huì)使組件一直不停的刷新:

  const [a, setA] = useState<number[]>([]);
 
  useEffect(() => {
    setA([11])
  }, [a]);

而且此時(shí)此刻控制臺(tái)也拋出了錯(cuò)誤,如下圖:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Home (http://localhost:8000/static/umi.js:93407:73)
    at Route
    at Switch
    at Router (http://localhost:8000/static/umi.js:86181:30)
    at RouterComponent (http://localhost:8000/static/umi.js:84374:23)
    at Provider (http://localhost:8000/static/umi.js:73004:20)
    at _DvaContainer (http://localhost:8000/static/umi.js:90776:5)
    at http://localhost:8000/static/umi.js:91243:24
    at ./src/.umi/plugin-model/Provider.tsx.__webpack_exports__.default (http://localhost:8000/static/umi.js:91706:23)

為何會(huì)一直刷新呢?

因?yàn)閭鹘ouseEffect的第二個(gè)參數(shù)為引用類型,因?yàn)閮蓚€(gè)引用類型在進(jìn)行比較的時(shí)候永遠(yuǎn)都是不相等的,以數(shù)組為例,聲明一個(gè)數(shù)組就是從Array類上實(shí)例化出來了一個(gè)新對(duì)象,然后JS引擎會(huì)為這個(gè)對(duì)象分配內(nèi)存空間,所以不同的對(duì)象,就會(huì)有不同的內(nèi)存空間,所以兩個(gè)引用類型的比較永遠(yuǎn)都是不相等的;例如:

console.log([] === []); //false,此時(shí)注意一下,兩個(gè)是不相等的

有了以上的了解,在使用useEffect的時(shí)候就應(yīng)該注意兩點(diǎn):

1. 第二個(gè)參數(shù)對(duì)應(yīng)的數(shù)組中,盡量避免使用引用類型(此時(shí)可以在第一個(gè)參數(shù)也就是執(zhí)行的副作用函數(shù)中調(diào)用setState相關(guān)的代碼)。

2.如果第二個(gè)參數(shù)中用了引用類型,就應(yīng)該在第一個(gè)參數(shù)也就是執(zhí)行的副作用函數(shù)中不要用setState相關(guān)的代碼,要不然會(huì)使得組件陷入到死循環(huán)中,報(bào)上面的錯(cuò)誤。

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

相關(guān)文章

  • 如何在React項(xiàng)目中引入字體文件并使用詳解

    如何在React項(xiàng)目中引入字體文件并使用詳解

    我們項(xiàng)目中通常會(huì)需要引入字體,所以下面這篇文章主要給大家介紹了關(guān)于如何在React項(xiàng)目中引入字體文件并使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • React中如何使用scss

    React中如何使用scss

    這篇文章主要介紹了React中如何使用scss問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • 基于React實(shí)現(xiàn)下拉刷新效果

    基于React實(shí)現(xiàn)下拉刷新效果

    這篇文章主要介紹了如何基于react實(shí)現(xiàn)下拉刷新效果,在下拉的時(shí)候會(huì)進(jìn)入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-03-03
  • React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)

    React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)

    這篇文章主要為大家詳細(xì)介紹了React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-04-04
  • 教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext

    教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext

    這篇文章主要介紹了react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext,其實(shí)與vue中的ref和reactive一樣,通過useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時(shí)交互,而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用,需要的朋友可以參考下
    2022-11-11
  • React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹

    React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹

    在Vue中,我們導(dǎo)入文件時(shí),文件路徑中可以使用@符號(hào)指代src目錄,極大的簡(jiǎn)化了我們對(duì)路徑的書寫。但是react中,要想實(shí)現(xiàn)這種方式書寫文件路徑,需要寫配置文件來實(shí)現(xiàn)
    2022-09-09
  • React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法

    React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法

    今天講一下如何實(shí)現(xiàn)自定義標(biāo)題欄組件,我們都知道RN有一個(gè)優(yōu)點(diǎn)就是可以組件化,在需要使用該組件的地方直接引用并傳遞一些參數(shù)就可以了,這種方式確實(shí)提高了開發(fā)效率。對(duì)React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法感興趣的朋友參考下
    2017-01-01
  • Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析

    Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析

    這篇文章主要為大家介紹了Redis數(shù)據(jù)結(jié)構(gòu)高頻面試問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • React中閉包陷阱的幾種情及解決方案

    React中閉包陷阱的幾種情及解決方案

    在react中我們使用其提供的Hooks中的useState,useEffect,useCallback 時(shí),可能會(huì)造成閉包陷阱,下面我們來看一下出現(xiàn)的情況以及如何解決,感興趣的小伙伴跟著小編一起來看看吧
    2024-07-07
  • React路由組件傳參的三種方式(params、search、state)

    React路由組件傳參的三種方式(params、search、state)

    本文主要介紹了React路由組件傳參的三種方式,主要包括了params、search、state,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07

最新評(píng)論