useEffect的第二個參數

useEffect規則

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

第二個參數的規則

• 它是可選的
• 類型是一個數組

不同值的參數

• 不傳參數
• 空數組
• 一個值的數組
• 多個值的數組

示例

1. 沒有第二個參數時,組件的初始話和更新都會執行?

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

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

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

3. 有一個值的數組時，該值有變化就執行

4. 有多個值的數組時，只要有一個值有變化就執行

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

useEffect使用技巧

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

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

// 在一個正常的Hooks函數中，有如下代碼，此代碼實現的原理就是通過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發生了變化
    }
    if (prevB !== b) {
      // 證明b發生了變化
    }
    if (prevC !== c) {
      // 證明c發生了變化
    }
  }, [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的第二個參數為引用類型，因為兩個引用類型在進行比較的時候永遠都是不相等的，以數組為例，聲明一個數組就是從Array類上實例化出來了一個新對象，然后JS引擎會為這個對象分配內存空間，所以不同的對象，就會有不同的內存空間，所以兩個引用類型的比較永遠都是不相等的；例如：

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

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

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

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