useEffect总是能正确读取不在自身依赖的state值吗?

我一直以为useEffect如果不在依赖数组写入所有依赖的响应值就会出错。但根据实验,即使不在依赖内,useEftect依旧可以读取到最新响应值。而不是返回陈旧的状态值。示例代码如下:

import React, { useEffect, useState } from "react"
export function Test() {
    const [count, setCount] = useState(0)
    const [message, setMessage] = useState("")

    useEffect(() => {
        // 尽管没有包含message,但此时输出的总是最新message值
        console.log("message:", message)
    }, [count])

    return (
        <div>
            <p>Count: {count}</p>
            <p>Message: {message}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setMessage("Hello")}>Update Message</button>
        </div>
    )
}

按理来说useEffect应该是闭包,所以里面的状态应当是useEffect创建时的状态,为什么会是最新的状态。

按照我的理解来说当依赖数组当中的依赖项变更时是否能获取到此时所有状态值的最新值,取决于当依赖变化时,useEffect重新创建时到底是不是只更新依赖项的最新值。如果是整个useEffect都重新创建,那显然只要依赖数组存在依赖项,依赖项变更时,useEffect中所有状态总是能获取最新值。

关联资料:

  • react的新特性可以解决使用最新值但不依赖问题:useEffectEvent

有没有可以体现出如果不包含在依赖数组中取不到最新值的例子

阅读 2.8k
1 个回答
import React, { useEffect, useState } from "react";

export function Test() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      
      console.log("count:", count);
    }, 1000);

    return () => clearInterval(interval);
  }, []); 

  return (
    <div>
      <p>Count: {count}</p>
      <p>Message: {message}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setMessage("Hello")}>Update Message</button>
    </div>
  );
}
推荐问题
logo
Microsoft
子站问答
访问
宣传栏