react中如何使用useEffect

這篇文章主要講解了“react中如何使用useEffect”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react中如何使用useEffect”吧！

使用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 <h2>Hello, {props.name}</h2>;
}

上面例子中，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>;
}

感謝各位的閱讀，以上就是“react中如何使用useEffect”的內容了，經過本文的學習后，相信大家對react中如何使用useEffect這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！