setColor() 如何引用最新的颜色变量？

Question

export default function App() {

  let [color, setColor] = useState("red");

  useEffect(() => {

    setColor("blue");

    setTimeout(() => {

      console.log(color);

      setColor("purple");

    }, 1000);

  }, []);

  function revealColor() {

    console.log(color);

  }

  return <button onClick={revealColor}>Click after 1 second to reveal color</button>

}

沙盒

根据上一个问题，我知道setTimeout回调引用了第一个color变量（红色）。不知何故，它setColor设法更改了最新的color变量（通过单击记录“紫色”的按钮即可证明）。怎么会这样呢？我想setColor同样会引用旧setColor变量。

setColor("blue");PS“旧”，我指的是重新执行返回新变量/函数的整个组件的事实color。

Answer 1

setColor是一个改变color状态的函数。它不会直接更改color变量。每次状态改变时App函数都会重新运行。因此，当它第一次运行时useState("red")，它调用 ，发现不存在现有状态，将状态设置为"red"然后将状态 (&nbsp;"red") 分配给color。DOM 将根据结果进行更新。setColor("blue");"blue"更改导致App再次运行的状态。已经存在一个状态，因此color设置为"blue"。它不是用 初始化的"red"。DOM 将根据结果进行更新。一秒钟后，超时解决并将setColor("purple");颜色设置为"purple"导致再次App运行的状态。已经存在一个状态，因此设置为。color"purple"每次更新 DOM 时，它都会revealColor传递一个新函数，onClick该函数已关闭color最近调用的变量App。同时，您传递给的函数useEffect仅运行一次（因为您[]作为第二个参数传递），因此color它关闭的变量是原始变量，您将"red"在那里记录。

Answer 2

这是因为你没有包含color在 的依赖数组中useEffect。因此，useEffect不知道已经color改变。如果将其包含在依赖项数组中，则每当更改useEffect时都会触发。color因此，您blue登录时就可以看到。useEffect(() => {&nbsp; &nbsp; setColor("blue");&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; console.log(color);&nbsp; &nbsp; &nbsp; setColor("purple");&nbsp; &nbsp; }, 1000);&nbsp; }, [color]); // <- dependency array