useEffect的第二個參數(shù)

useEffect規(guī)則

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

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

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

不同值的參數(shù)

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

示例

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

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

2. 空數(shù)組時，初始化調用一次之后不再執(zhí)行，相當于componentDidMount

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

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

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

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

useEffect使用技巧

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

如果第二個傳了多個參數(shù)，如何查看是那個參數(shù)發(fā)生了變化呢？請看代碼：

// 在一個正常的Hooks函數(shù)中，有如下代碼，此代碼實現(xiàn)的原理就是通過useRef來達到緩存的目的
  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])

有時使用useEffect會使組件一直處于不停的刷新，這個是為什么？

看如下代碼，會使組件一直不停的刷新：

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

而且此時此刻控制臺也拋出了錯誤，如下圖：

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)

為何會一直刷新呢？

因為傳給useEffect的第二個參數(shù)為引用類型，因為兩個引用類型在進行比較的時候永遠都是不相等的，以數(shù)組為例，聲明一個數(shù)組就是從Array類上實例化出來了一個新對象，然后JS引擎會為這個對象分配內存空間，所以不同的對象，就會有不同的內存空間，所以兩個引用類型的比較永遠都是不相等的；例如：

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

有了以上的了解，在使用useEffect的時候就應該注意兩點：

1. 第二個參數(shù)對應的數(shù)組中，盡量避免使用引用類型（此時可以在第一個參數(shù)也就是執(zhí)行的副作用函數(shù)中調用setState相關的代碼）。

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

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

最新評論