關(guān)于useEffect的第二個(gè)參數(shù)解讀
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純前端模擬實(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,其實(shí)與vue中的ref和reactive一樣,通過useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時(shí)交互,而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用,需要的朋友可以參考下2022-11-11React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹
在Vue中,我們導(dǎo)入文件時(shí),文件路徑中可以使用@符號(hào)指代src目錄,極大的簡(jiǎn)化了我們對(duì)路徑的書寫。但是react中,要想實(shí)現(xiàn)這種方式書寫文件路徑,需要寫配置文件來實(shí)現(xiàn)2022-09-09React 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-01Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析
這篇文章主要為大家介紹了Redis數(shù)據(jù)結(jié)構(gòu)高頻面試問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式,主要包括了params、search、state,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07