javascript - 将 react Hook 设置为导致循环的数组

Question

有没有其他人注意到这种奇怪的行为？

似乎当我在 useState Hook 中声明一个设置 Hook 到数组的函数时，我得到了一个无限循环。

但是将相同的钩子(Hook)设置为空字符串不会导致循环。

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [foo, setFoo] = useState([]);
  

  useEffect(() => {
    console.log("useEffect")
    FooFunction()
  },[foo]);

  function FooFunction () {
    // If you setFoo with an array we can an infinite loop
    setFoo('')
    // setFoo([1,2,3])
  }

  return <div className="App">Whats up with this loop?</div>;
}

export default App;

Answer 1

数组是引用类型。通过将 foo 设置为一个数组，您正在创建一个新的引用。这意味着您在 useEffect 中对 foo 的依赖性发生了变化。依赖项中的任何更改都会触发组件的重新渲染。

当您使用 setFoo('') 时，字符串按值进行比较(例如 '' === '' 为真)，因此您的依赖关系不会改变在那种情况下。