React的useEffect Hook可以讓用戶處理應(yīng)用程序的副作用。例如:

• 從網(wǎng)絡(luò)獲取數(shù)據(jù):應(yīng)用程序通常在第一次加載時獲取并填充數(shù)據(jù)。這可以通過useEffect函數(shù)實現(xiàn)
• 操作UI:應(yīng)用程序應(yīng)該響應(yīng)按鈕點擊事件(例如，打開一個菜單)
• 設(shè)置或結(jié)束計時器:如果某個變量達到預(yù)定義值，則內(nèi)置計時器應(yīng)自行停止或啟動

盡管useEffect Hook在React生態(tài)系統(tǒng)中很常見，但它需要時間來掌握。因此，許多新手開發(fā)人員在配置他們的useEffect函數(shù)時，會導(dǎo)致無限循環(huán)問題。在本文中，您將了解不同場景下帶來的無限循環(huán)問題以及如何解決它們。

這是我們今天要學習的內(nèi)容:

是什么導(dǎo)致無限循環(huán)以及如何解決它們：

• 在依賴項數(shù)組中不傳遞依賴項
• 使用函數(shù)作為依賴項
• 使用數(shù)組作為依賴項
• 使用對象作為依賴項
• 傳遞不正確的依賴項

什么導(dǎo)致的無限循環(huán)以及如何解決它們

在依賴項數(shù)組中不傳遞依賴項

如果您的useEffect函數(shù)不包含任何依賴項，則會出現(xiàn)一個無限循環(huán)。

例如，看看下面的代碼:

function App() {
  const [count, setCount] = useState(0); //初始化值
  useEffect(() => {
    setCount((count) => count + 1); 
  }); //無依賴項
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

如果沒有依賴關(guān)系，則默認在每個更新周期上觸發(fā)useEffect。因此，這里的應(yīng)用程序?qū)⒃?strong>每次渲染時執(zhí)行setCount函數(shù)。因此，這會導(dǎo)致一個無限循環(huán):

是什么導(dǎo)致了這個問題?讓我們一步一步來分析這個問題:

• 在第一次渲染時，React會檢查count的值。在這里，由于count為0，程序執(zhí)行useEffect函數(shù)
• 稍后，useEffect調(diào)用setCount方法并更新count的值
• 之后，React重新呈現(xiàn)UI以顯示count的更新值
• 此外，由于useEffect在每個呈現(xiàn)周期中運行，它將重新調(diào)用setCount函數(shù)
• 由于上述步驟發(fā)生在每一個渲染，這導(dǎo)致你的應(yīng)用程序崩潰

如何解決這個問題

為了緩解這個問題，我們必須使用依賴數(shù)組，告訴React只有在特定值更新時才調(diào)用useEffect。

下一步，像這樣附加一個空白數(shù)組作為依賴項:

useEffect(() => {
  setCount((count) => count + 1);
}, []); //empty array as second argument.

這告訴React在第一次裝載時執(zhí)行setCount函數(shù)。

使用函數(shù)作為依賴項

如果你把一個方法傳入你的useEffect依賴數(shù)組，React會拋出一個錯誤，表明你有一個無限循環(huán):

function App() {
  const [count, setCount] = useState(0);

  function logResult() {
    return 2 + 2;
  }
  useEffect(() => {
    setCount((count) => count + 1);
  }, [logResult]); // 函數(shù)作為依賴項
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

在這段代碼中，我們將logResult方法傳遞給useEffect數(shù)組。理論上，React只需要在第一次渲染時增加count的值。

是什么導(dǎo)致了這個問題?

• 要記住的一件事是，useEffect使用了一個叫做淺比較的概念。它這樣做是為了驗證依賴項是否已經(jīng)更新
• 這里的問題是，在每次呈現(xiàn)期間，React都會重新定義logResult的引用
• 因此，這將在每個循環(huán)中重新觸發(fā)useEffect函數(shù)
• 因此，React會調(diào)用setCount鉤子，直到應(yīng)用程序遇到更新深度錯誤。這會給程序帶來錯誤和不穩(wěn)定性

如何解決這個問題

一個解決方案是使用useCallback鉤子。這允許開發(fā)人員記住他們的函數(shù)，從而確保引用值保持不變。由于這個參考值是穩(wěn)定的，React不應(yīng)該無限地重新渲染UI:

const logResult = useCallback(() => {
  return 2 + 2;
}, []); // logResult是緩存的
useEffect(()=> {
  setCount((count)=> count+1);
},[logResult]); //沒有無限循環(huán)錯誤，因為logResult引用保持不變。

結(jié)果：

使用數(shù)組作為依賴項

將數(shù)組變量傳遞給依賴項也會運行一個無限循環(huán)?？紤]下面的代碼示例:

const [count, setCount] = useState(0); //初始值為0。
const myArray = ["one", "two", "three"];

useEffect(() => {
  setCount((count) => count + 1); // 和前面一樣，增加Count的值
}, [myArray]); // 將數(shù)組變量傳遞給依賴項

在這個塊中，我們將myArray變量傳入依賴參數(shù)。

是什么導(dǎo)致了這個問題?

既然myArray的值在整個程序中都沒有改變，為什么我們的代碼會多次觸發(fā)useEffect ?

• 在這里，回想一下React使用淺比較來檢查依賴項的引用是否發(fā)生了變化。
• 由于對myArray的引用在每次渲染時都在變化，useEffect將觸發(fā)setCount回調(diào)
• 因此，由于myArray的引用值不穩(wěn)定，React將在每個渲染周期中調(diào)用useEffect。最終，這會導(dǎo)致應(yīng)用程序崩潰

如何解決這個問題

為了解決這個問題，我們可以使用useRefHook。這將返回一個可變對象，確保引用不會改變:

const [count, setCount] = useState(0);
//提取“current”屬性并給它賦值
const { current: myArray } = useRef(["one", "two", "three"]);

useEffect(() => {
  setCount((count) => count + 1);
}, [myArray]); //依賴值是穩(wěn)定的，所以沒有無限循環(huán)

將對象作為依賴項傳遞

在useEffect依賴數(shù)組中使用對象也會導(dǎo)致無限循環(huán)問題。

考慮下面的代碼:

const [count, setCount] = useState(0);
const person = { name: "Rue", age: 17 }; //創(chuàng)建一個對象
useEffect(() => {
  // 每次增加count的值
  // person的值發(fā)生了變化
  setCount((count) => count + 1);
}, [person]); // 依賴項數(shù)組包含一個對象作為參數(shù)
return (
  <div className="App">
    <p> Value of {count} </p>
  </div>
);

控制臺的結(jié)果表明程序是無限循環(huán)的:

是什么導(dǎo)致了這個問題?

• 和之前一樣，React使用淺比較來檢查person的參考值是否發(fā)生了變化
• 因為person對象的引用值在每次渲染時都會改變，所以React會重新運行useEffect
• 因此，在每個更新周期中調(diào)用setCount。這意味著我們現(xiàn)在有了一個無限循環(huán)

如何解決這個問題

那么我們?nèi)绾谓鉀Q這個問題呢?

這就是usemmo的用武之地。**當依賴關(guān)系發(fā)生變化時，這個鉤子會計算一個記憶的值。**除此之外，因為我們記住了一個變量，這確保了狀態(tài)的引用值在每次渲染期間不會改變:

// 使用usemo創(chuàng)建一個對象
const person = useMemo(
  () => ({ name: "Rue", age: 17 }),
  [] //沒有依賴關(guān)系，所以值不會改變
);
useEffect(() => {
  setCount((count) => count + 1);
}, [person]);

傳遞不正確的依賴項

如果將錯誤的變量傳遞給useEffect函數(shù)，React將拋出一個錯誤。

下面是一個簡單的例子:

const [count, setCount] = useState(0);

useEffect(() => {
  setCount((count) => count + 1);
}, [count]); //注意，我們將count傳遞給了這個數(shù)組。

return (
  <div className="App">
    <button onClick={() => setCount((count) => count + 1)}>+</button>
    <p> Value of count{count} </p>
  </div>
);

是什么導(dǎo)致了這個問題?

• 在上面的代碼中，我們告訴在useEffect方法中更新count的值
• 此外，注意我們也將count Hook傳遞給了它的依賴數(shù)組
• 這意味著每次count值更新時，React都會調(diào)用useEffect
• 因此，useEffect鉤子調(diào)用setCount，從而再次更新count
• 因此，React現(xiàn)在在一個無限循環(huán)中運行我們的函數(shù)

如何解決這個問題

要擺脫無限循環(huán)，只需像這樣使用一個空的依賴數(shù)組:

const [count, setCount] = useState(0);
// 只有在組件首次掛載時才更新'count'的值
useEffect(() => {
  setCount((count) => count + 1);
}, []);

這將告訴React在第一次渲染時運行useEffect。

結(jié)尾

盡管React Hooks是一個簡單的概念，但是在將它們整合到項目中時，仍然需要記住許多規(guī)則。這將確保您的應(yīng)用程序保持穩(wěn)定，優(yōu)化，并在生產(chǎn)過程中不拋出錯誤。

此外，最近發(fā)布的Create React App CLI也會在運行時檢測和報告無限循環(huán)錯誤。這有助于開發(fā)人員在這些問題出現(xiàn)在生產(chǎn)服務(wù)器上之前發(fā)現(xiàn)并解決這些問題。

 到此這篇關(guān)于如何解決React useEffect鉤子帶來的無限循環(huán)問題的文章就介紹到這了,更多相關(guān)React useEffect鉤子無限循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論