一般來說，無限循環(huán)被認(rèn)為是不好的做法。但在一些邊界 case 中，你沒有任何選擇，只能選擇無限循環(huán)。了解 React 的無限循環(huán)模式是件好事。

當(dāng)無限循環(huán)沒有無法停止時，最終瀏覽器會殺死你的代碼正在運行的標(biāo)簽。所以不要使用沒有任何斷點的 “無限循環(huán)”。

useEffect

useEffect hook 允許我們在一個組件中表現(xiàn)出副作用。當(dāng) hooks 被引入 react 16 時，useEffect hooks 比其他 hooks 更有吸引力。因為它提供了 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的綜合功能。

只有當(dāng)依賴關(guān)系被改變時，useEffect hook 才會觸發(fā)回調(diào)函數(shù)。而且它使用淺比較法來比較 hooks 的值。

你可以把 useEffect 看作是一塊能量石，它是一塊最強大的石頭，如果你沒有正確地處理它，這塊石頭會摧毀你。

缺失依賴

缺失依賴關(guān)系的 useEffect 通常被認(rèn)為是一種不好的做法，所以總是盡量避免它。

思考一下下面的代碼，它將一直調(diào)用 API。

 
 
 
 

  
  
  
  
useEffect(() => { 
  
  
  
  
  fetch("/api/user") 
  
  
  
  
    .then((res) => res.json) 
  
  
  
  
    .then((res) => { 
  
  
  
  
      setData(res); 
  
  
  
  
    }); 
  
  
  
  
}); 
 
 
 
 

會發(fā)生什么

如果 useEffect 只有在依賴關(guān)系發(fā)生變化時才觸發(fā)回調(diào)，那為什么我們在這里會出現(xiàn)無限循環(huán)?

你需要考慮到 React 的另一個重要的法則，即 “當(dāng) state 或 props 發(fā)生變化時，組件將重新渲染”。

在這段代碼中，我們使用 setData 在網(wǎng)絡(luò)調(diào)用成功后設(shè)置狀態(tài)值，它將觸發(fā)組件的重新渲染。由于 useEffect 沒有值可以比較，所以它將調(diào)用回調(diào)。

Fetch 將再次觸發(fā)setData，setData將觸發(fā)組件重新渲染，如此反復(fù)。

如何修復(fù)這個問題?

我們需要將依賴指定為空數(shù)組。

 
 
 
 

  
  
  
  
useEffect(() => { 
  
  
  
  
  fetch("/api/user") 
  
  
  
  
    .then((res) => res.json) 
  
  
  
  
    .then((res) => { 
  
  
  
  
      setData(res); 
  
  
  
  
    }); 
  
  
  
  
}, []); // <- dependencies 
 
 
 
 

根據(jù)官方文檔，省略依賴關(guān)系是不安全的

依賴性的作用

useEffect 使用淺層對象比較來確定數(shù)據(jù)是否被改變。因為奇怪的 JavaScript 條件判斷系統(tǒng) ??。

 
 
 
 

  
  
  
  
var mark1 = function () { 
  
  
  
  
  return "100"; 
  
  
  
  
}; // 唯一的對象引用 
  
  
  
  
var mark2 = function () { 
  
  
  
  
  return "100"; 
  
  
  
  
}; // 唯一的對象引用 
  
  
  
  
mark1 == mark2; // false 
  
  
  
  
mark1 === mark2; // false 
 
 
 
 

讓我們看看以下代碼

 
 
 
 

  
  
  
  
import React, { useCallback, useEffect, useState } from "react"; 
  
  
  
  
export default function App() { 
  
  
  
  
  const [count, setCount] = useState(0); 
  
  
  
  
  const getData = () => { 
  
  
  
  
    return window.localStorage.getItem("token"); 
  
  
  
  
  }; 
  
  
  
  
  const [dep, setDep] = useState(getData()); 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    setCount(count + 1); 
  
  
  
  
  }, [getData]); 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      
Hello CodeSandbox
 
  
  
  
  
       setCount(count + 1)}>{count} 
  
  
  
  
      
Start editing to see some magic happen!