React Hooks 无限循环与数组

Question

当我在 React 的 useEffect 挂钩中将数组分配给状态时，我遇到了无限循环，我不确定为什么要添加状态 series 作为依赖项。

const [series, setSeries] = useState([]);
useEffect(() => {
  setSeries([1, 2, 3, 4]);
}, [series]);

带有字符串的相同代码不会创建无限循环

const [series, setSeries] = useState([]);
useEffect(() => {
  setSeries('No Infinite Loop');
}, [series]);

Answer 1

您已经在挂钩中添加了系列依赖项并且您正在更新系列，因此每当系列更新时都会调用该挂钩。所以，它进入无限。

const [series, setSeries] = useState([]);
useEffect(() => {
  setSeries([1, 2, 3, 4]);
}, []);

Answer 2

React 在涉及到状态时会进行浅层相等性检查，除非另有定义。当你这样做 setSeries([1, 2, 3, 4]); 时，每次调用此效果时都会创建数组 [1, 2, 3, 4]，并且由于你的 useEffect 依赖于 series，它将被无限调用。

另一方面，字符串的浅比较不会导致无限循环，因为它们是 "shallow equal"。

Answer 3

[1,2,3]!==[1,2,3] 而 "123"==="123" 当您将数组设置为依赖项并使用该数组作为状态时，数组 "change" 一切 setSeries 依次触发渲染依次触发 useEffect 进而触发 setSeries 依此类推

React Hooks infinite loop with Array