React开发Chrome扩展使用长连接时无法获取最新state值

核心是React Hook 空依赖导致的陈旧闭包问题，和时序无关：

• 你给消息监听绑定逻辑所在的useEffect传入了空依赖数组[]，这段逻辑只会在组件首次挂载时执行一次，绑定到port.onMessage上的监听器函数，也是首次渲染阶段创建的。
• 这个监听器函数形成的闭包，只会捕获首次渲染上下文中的projectDetail值，也就是你初始化时的{ projectCode: null }。
• 后续setProjectDetail触发组件重渲染时，React会生成新的projectDetail状态值、新的渲染上下文，但你之前绑定的旧监听器从来没有被移除重绑，它持有的永远是第一次渲染时捕获的旧状态引用，自然打印不出更新后的值。
• React DevTools展示的是React内部维护的最新状态快照，和旧监听器闭包里缓存的旧值是完全独立的，二者不会同步。

另外你把port变量定义在组件作用域外也存在隐患，组件重挂载时容易出现端口引用错乱、重复绑定监听器的问题。

你可以根据场景选以下两种方案之一：

方案1：更新useEffect依赖，状态变化时重绑监听器 #

把projectDetail加入依赖数组，每次状态更新时重新执行effect逻辑，绑定捕获了最新状态的监听器，记得在清理函数里移除旧监听器避免内存泄漏：

useEffect(() => {
  // 把port定义在effect内部，避免全局污染
  const port = chrome.runtime.connect({ name: 'Background Connection' })
  // 抽离监听器函数，方便解绑
  const handleMessage = ({ action, payload }) => {
    switch (action) {
      case ACTION.SET_PROJECT_DETAIL:
        setProjectDetail(payload);
        break;
      case ACTION.CHECK_STATE:
        console.log(projectDetail)
        break;
      default:
        break;
    }
  }

  port.onMessage.addListener(handleMessage)
  port.postMessage({ action: ACTION.GET_PROJECT_DETAIL })
  
  return () => {
    // 清理阶段移除旧监听器、断开连接
    port.onMessage.removeListener(handleMessage)
    port.disconnect()
  }
}, [projectDetail])

这个方案的优点是逻辑直观符合Hook的常规写法，缺点是每次projectDetail更新都会重新建立长连接，如果你的连接建立逻辑比较重可以选第二种方案。

方案2：用useRef同步最新状态，无需频繁重连 #

通过useRef保存最新状态的引用，绕开闭包捕获旧值的问题，监听器只需要在挂载时绑定一次即可：

const [projectDetail, setProjectDetail] = useState({ projectCode: null })
// 建立ref同步存储最新状态
const projectDetailRef = useRef(projectDetail)
// 每次状态更新时同步ref的值
useEffect(() => {
  projectDetailRef.current = projectDetail
}, [projectDetail])

useEffect(() => {
  const port = chrome.runtime.connect({ name: 'Background Connection' })
  const handleMessage = ({ action, payload }) => {
    switch (action) {
      case ACTION.SET_PROJECT_DETAIL:
        setProjectDetail(payload);
        break;
      case ACTION.CHECK_STATE:
        // 从ref上读取最新值，不受闭包缓存影响
        console.log(projectDetailRef.current)
        break;
      default:
        break;
    }
  }

  port.onMessage.addListener(handleMessage)
  port.postMessage({ action: ACTION.GET_PROJECT_DETAIL })
  
  return () => {
    port.onMessage.removeListener(handleMessage)
    port.disconnect()
  }
// 保持空依赖，只在挂载时绑定一次监听器
}, [])

内容的提问来源于stack exchange，提问作者Whyashh