一般来说，无限循环被认为是不好的做法。但在一些边界 case 中，你没有任何选择，只能选择无限循环。了解 React 的无限循环模式是件好事。

当无限循环没有无法停止时，最终浏览器会杀死你的代码正在运行的标签。所以不要使用没有任何断点的 “无限循环”。

useEffect

useEffect hook 允许我们在一个组件中表现出副作用。当 hooks 被引入 react 16 时，useEffect hooks 比其他 hooks 更有吸引力。因为它提供了 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的综合功能。

只有当依赖关系被改变时，useEffect hook 才会触发回调函数。而且它使用浅比较法来比较 hooks 的值。

你可以把 useEffect 看作是一块能量石，它是一块最强大的石头，如果你没有正确地处理它，这块石头会摧毁你。

缺失依赖

缺失依赖关系的 useEffect 通常被认为是一种不好的做法，所以总是尽量避免它。

思考一下下面的代码，它将一直调用 API。

 
 
 
 

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

会发生什么

如果 useEffect 只有在依赖关系发生变化时才触发回调，那为什么我们在这里会出现无限循环?

你需要考虑到 React 的另一个重要的法则，即 “当 state 或 props 发生变化时，组件将重新渲染”。

在这段代码中，我们使用 setData 在网络调用成功后设置状态值，它将触发组件的重新渲染。由于 useEffect 没有值可以比较，所以它将调用回调。

Fetch 将再次触发setData，setData将触发组件重新渲染，如此反复。

如何修复这个问题?

我们需要将依赖指定为空数组。

 
 
 
 

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

根据官方文档，省略依赖关系是不安全的

依赖性的作用

useEffect 使用浅层对象比较来确定数据是否被改变。因为奇怪的 JavaScript 条件判断系统 ??。

 
 
 
 

  
  
  
  
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!