React组件绑定Chrome消息监听器时状态更新异常原因咨询

这是React Hooks中典型的**陈旧闭包（Stale Closure）**问题，和Chrome扩展的消息收发逻辑无关。

第一个版本失效的原因 #

• 你给消息事件绑定监听器的useEffect传入了空依赖数组[]，这个effect只会在组件首次挂载时执行1次，注册到chrome.runtime.onMessage上的监听器，也是首次渲染时生成的函数。
• JavaScript闭包特性决定了：首次渲染时创建的increment函数，永远只会捕获当时的counter初始值0。后续counter更新触发组件重渲染时，虽然会生成捕获了最新counter值的新increment函数，但消息事件上绑定的始终是第一次创建的旧函数，根本拿不到后续更新的counter值。
• 所以每次收到消息触发旧increment时，执行的永远是setCounter(0 + 1)，不管触发多少次消息，counter都会被重置为1，控制台就会反复输出Incrementing 0 -> 1。
• 这个版本还有个隐藏问题：绑定的事件监听器没有在组件卸载时移除，会造成内存泄漏，甚至出现一次消息触发多次累加的bug。

第二个版本正常运行的原因 #

第二个版本把逻辑拆成了两个部分，绕开了闭包陷阱：

1. 注册在消息事件上的监听器只做setMessage操作，这个逻辑不依赖任何组件内的可变变量，哪怕是首次挂载时注册的旧监听器，也能正常触发message状态更新，不存在闭包问题。
2. 负责调用increment的第二个useEffect把message设为依赖项：每次message变化触发组件重渲染时，这个effect都会拿到当前渲染周期下最新的increment函数，此时函数捕获的counter是上一次更新后的最新值，所以累加逻辑可以正常执行。

更简洁的优化方案 #

不需要额外加中间message状态，用React setState的函数式更新写法，就能直接解决闭包问题，代码更简洁：

// app.jsx
import React from 'react'
import { createRoot } from "react-dom/client";

function App() {
    const [ counter, setCounter ] = React.useState(0)

    React.useEffect(() => {
        const listener = () => {
            // 函数式更新直接拿React保证的最新前序状态，不依赖闭包中的counter
            setCounter(prev => prev + 1)
        }
        chrome.runtime.onMessage.addListener(listener)
        // 组件卸载时移除监听器，避免内存泄漏
        return () => chrome.runtime.onMessage.removeListener(listener)
    }, [ ])

    return <h1>Counter: {counter}</h1>
}

createRoot(document.getElementById('root')).render(<App />)

函数式更新的参数是React保证的、上一次更新后的最新状态值，完全不需要依赖闭包中捕获的counter变量，哪怕监听器是首次挂载时注册的旧函数，也能正常完成累加。

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