Javascript setColor（）如何引用最新的颜色变量？ 导出默认函数App（）{ let[color，setColor]=useState（“红色”）； useffect（（）=>{ setColor（“蓝色”）； 设置超时（（）=>{ 控制台。日志（颜色）； 毛色（“紫色”）； }, 1000); }, []); 函数revealColor（）{ 控制台。日志（颜色）； } 1秒后返回单击以显示颜色 }

在此之后，我了解到

setTimeout

的回调引用了第一个

color

变量（红色）。尽管它的

setColor

设法更改了最近的

color

变量（单击记录为“紫色”的按钮即可证明）。这是怎么回事？我认为

setColor

同样会引用旧的

setColor

变量

---

顺便说一句，我指的是

setColor（“蓝色”）

重新执行整个组件，返回一个新的

color

变量/函数。

这是因为

useffect

的依赖项数组中没有包含

color

。因此，

useffect

不知道

颜色已更改。如果将其包括在依赖项数组中，则每当更改
颜色时，
useffect
都将触发。因此，您可以在登录时看到
蓝色

useffect（（）=>{
setColor（“蓝色”）；
设置超时（（）=>{
控制台。日志（颜色）；
毛色（“紫色”）；
}, 1000);
}，[颜色]；// 
setColor
是一个在状态下更改
颜色的函数。它不会直接更改
颜色
变量

每次状态更改时，将重新运行
应用程序
功能

因此，当它第一次运行时，它调用
useState（“red”）
，发现不存在任何状态，将状态设置为
“red”
，然后将状态（
“red”
）分配给
颜色。DOM将根据结果进行更新

setColor（“蓝色”）将状态更改为
“蓝色”
，这将导致
应用程序重新运行。已经存在一种状态，因此
颜色
设置为
“蓝色”
。它不是用
“red”
初始化的。DOM将根据结果进行更新

一秒钟后，超时解决并
setColor（“紫色”）
将状态中的颜色设置为“紫色”
，这会导致
应用程序再次运行。已经存在一种状态，因此
颜色
设置为
“紫色”

每次更新DOM时，它都会向
onClick
传递一个新的
revealColor
函数，该函数在最近调用
App
时关闭了
color
变量


同时，传递给
useffect
的函数只运行一次（因为传递了
[]
作为第二个参数），因此它关闭的
color
变量是原始变量，并在那里记录
“red”

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>
}