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

useEffect規(guī)則

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

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

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

不同值的參數(shù)

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

示例

1. 沒(méi)有第二個(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)的原理就是通過(guò)useRef來(lái)達(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ù)為引用類(lèi)型，因?yàn)閮蓚€(gè)引用類(lèi)型在進(jìn)行比較的時(shí)候永遠(yuǎn)都是不相等的，以數(shù)組為例，聲明一個(gè)數(shù)組就是從Array類(lèi)上實(shí)例化出來(lái)了一個(gè)新對(duì)象，然后JS引擎會(huì)為這個(gè)對(duì)象分配內(nèi)存空間，所以不同的對(duì)象，就會(huì)有不同的內(nèi)存空間，所以?xún)蓚€(gè)引用類(lèi)型的比較永遠(yuǎn)都是不相等的；例如：

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

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

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

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

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

最新評(píng)論