react中使用useEffect及踩坑記錄

2022-08-08 18:00:24

使用useEffect及踩坑記錄

useEffect 介紹

useEffect時reactHook中最重要，最常用的hook之一。

useEffect相當於react中的什麼生命週期呢？

這個問題在react官網中有過介紹，在使用的過程中，容易被忽略，在面試的時候卻經常被問及，（面試造航母，上班擰螺絲？），開個玩笑這個問題並不難回答，下面是react官方的原話：

如果你熟悉 React class 的生命週期函數，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數的組合。

componentDidMount 元件掛載
componentDidUpdate 元件更新
componentWillUnmount 元件將要摧毀

useEffect需要傳遞兩個引數，第一個引數是邏輯處理常式，第二個引數是一個陣列

用法

useEffect(() => {
/** 執行邏輯 */
},[])

重要理解

一、第二個引數存放變數，當陣列存放變數發生改變時，第一個引數，邏輯處理常式將會被執行

二、第二個引數可以不傳，不會報錯，但瀏覽器會無線迴圈執行邏輯處理常式。

useEffect(() => {
/** 執行邏輯 */
})

三、第二個引數如果只傳一個空陣列，邏輯處理常式裡面的邏輯只會在元件掛載時執行一次，不就是相當於 componentDidMount

useEffect(() => {
/** 執行邏輯 */
},[])

四、第二個引數如果不為空陣列，如下

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 執行邏輯 */
},[a,b])

邏輯處理常式會在元件掛載時執行一次和(a或者b變數在棧中的值發生改變時執行一次) 這是不是相當於componentDidMount 和 componentDidUpdate 的結合

五、useEffect第一個引數可以返回一個回撥函數，這個回撥函數將會在元件被摧毀之前和再一次觸發更新時，將之前的副作用清除掉。這就相當於componentWillUnmount。

useEffect去除副作用。我們可能會在元件即將被掛載的時候建立一些不斷迴圈的訂閱（計時器，或者遞迴迴圈）。在元件被摧毀之前，或者依賴陣列的元素更新後，應該將這些訂閱也給摧毀掉。

比如以下的情況（沒有去除計時器，增大不必要的開銷和程式碼風險)

const [time, setTime] = useState(0)
useEffect(() => {
    const InterVal = setInterval(() => {
        setTime(time + 1)
    },1000)
},[])

利用第五點，在元件被摧毀前去除計時器。

const [time, setTime] = useState(0)
useEffect(() => {
    const InterVal = setInterval(() => {
        setTime(time + 1)
    },1000)
    return () => {
           clearInterval(InterVal )
       }
},[])

useEffect常見跳坑

1、useEffect執行函數被迴圈執行。

出現這種情況可能有兩種原因。

沒傳第二個引數

useEffect(() => {
/** 執行邏輯 */
})

2、你在useEffect執行函數裡面改變了useEffect監測的變數

const [a, setA] = useState(1);
useEffect(() => {
/** 執行邏輯 */
setA(a + 1)
},[a])

解決的方法不要在useEffect第一引數執行函數中去改變第二引數依賴元素的地址的值。當依賴元素的地址的值發生改變，又會執行一次執行函數，這不是無限迴圈麼。

3、useEffect監測不到依賴陣列元素的變化。

只有一種可能，依賴陣列元素的地址的值根本就沒變，比如:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
    setA((old) => {
    old.b = 'yx'
    return old
    })
}
useEffect(() => {
/** 當元件掛載時執行一次changeA */
changeA ()
},[])
/**當changeA執行卻沒有列印 a*/
useEffect(() => {
/** 執行邏輯 */
console.log(a)
},[a])

是因為changeA沒有真正的改變a在棧中的值（地址的值），只是改變了a在堆中的值。

useEffect監測不到堆中值得變化，所有參照型別資料都應該注意這一點。

解決的辦法：

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
    setA((old) => {
    const newA = {...old}
    newA .b = 'yx'
    return newA 
    })
}
useEffect(() => {
/** 當元件掛載時執行一次changeA */
changeA ()
},[])
/**當changeA執行列印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 執行邏輯 */
console.log(a)
},[a])

hooks中useEffect()使用總結

常見使用

獲取資料案例：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );
      setData(result.data);
    };
    fetchData();
  }, []);
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

上面例子中，useState()用來生成一個狀態變數（data），儲存獲取的資料；useEffect()的副效應函數內部有一個 async 函數，用來從伺服器非同步獲取資料。拿到資料以後，再用setData()觸發元件的重新渲染。

由於獲取資料只需要執行一次，所以上例的useEffect()的第二個引數為一個空陣列

附線上執行程式碼

useEffect() 的第二個引數說明

有時候，我們不希望useEffect()每次渲染都執行，這時可以使用它的第二個引數，使用一個陣列指定副效應函數的依賴項，只有依賴項發生變化，才會重新渲染。

function Welcome(props) {
  useEffect(() => {
    document.title = `Hello, ${props.name}`;
  }, [props.name]);
  return <h1>Hello, {props.name}</h1>;
}

上面例子中，useEffect()的第二個引數是一個陣列，指定了第一個引數（副效應函數）的依賴項（props.name）。只有該變數發生變化時，副效應函數才會執行。如果第二個引數是一個空陣列，就表明副效應引數沒有任何依賴項。

因此，副效應函數這時只會在元件載入進入 DOM 後執行一次，後面元件重新渲染，就不會再次執行。這很合理，由於副效應不依賴任何變數，所以那些變數無論怎麼變，副效應函數的執行結果都不會改變，所以執行一次就夠了。

useEffect() 第一個函數引數的返回值

副效應是隨著元件載入而發生的，那麼元件解除安裝時，可能需要清理這些副效應。

useEffect()允許返回一個函數，在元件解除安裝時，執行該函數，清理副效應。如果不需要清理副效應，useEffect()就不用返回任何值。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

上面例子中，useEffect()在元件載入時訂閱了一個事件，並且返回一個清理函數，在元件解除安裝時取消訂閱。

實際使用中，由於副效應函數預設是每次渲染都會執行，所以清理函數不僅會在元件解除安裝時執行一次，每次副效應函數重新執行之前，也會執行一次，用來清理上一次渲染的副效應。

useEffect() 的注意點

使用useEffect()時，有一點需要注意。如果有多個副效應，應該呼叫多個useEffect()，而不應該合併寫在一起。

錯誤寫法：

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);
  useEffect(() => {
    const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
    const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
    return () => {
      clearTimeout(timeoutA);
      clearTimeout(timeoutB);
    };
  }, [varA, varB]);
  return <span>{varA}, {varB}</span>;
}

上面的例子是錯誤的寫法，副效應函數裡面有兩個定時器，它們之間並沒有關係，其實是兩個不相關的副效應，不應該寫在一起。正確的寫法是將它們分開寫成兩個useEffect()。

正確寫法：

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);
  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA]);
  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 2), 2000);
    return () => clearTimeout(timeout);
  }, [varB]);
  return <span>{varA}, {varB}</span>;
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。