React：未调用的 useState 变量在调试器的事件处理程序中不可用

Question

第一次这么问！希望我做得对。

问题是，当我在浏览器（Chrome）中的事件处理程序调试器中时，为什么事件处理程序未使用的 useState 变量不可用？

例如在调试器中，

testBoolean

不可用。 （在“观看”选项卡中，显示

<not available>

，在控制台中，显示

Uncaught ReferenceError: testBoolean is not defined

）。

如果我注释掉

console.log

行，

count

变量也会变得不可用。

import { useState } from 'react';
import Game from './Game';

export default function App() {
    const [testBoolean, setTestBoolean] = useState(true);
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(c => c + 1);
        console.log(count);
        debugger
    }

    return (
        <div>
            <button onClick={handleClick}>Clicked {count} times</button>
        </div>
    )
}

尝试过搜索，例如

react debugger unused useState variables not available in event handler

但我发现大多数线程处理的事件处理程序具有过时的 useState 值，这是一个完全不同的主题。一些想法：

• handleClick 是一个箭头函数，所以我相信它应该关闭函数组件中的其他常量？
• 当调用

  handleClick

  时，组件函数已经运行并返回虚拟 DOM 元素，因此 useState 变量应该已经被声明。

期待任何见解，这对于理解事件流/React 似乎至关重要，并且很乐意了解未来。谢谢你。

Answer 1

现代网络浏览器进行了许多优化来提高性能。其中之一是它们可以确定闭包是否需要某个变量。如果是这样，则必须在堆上分配该变量。如果没有，可以在栈上分配。由于您没有使用该变量，因此浏览器显然已决定将其放入堆栈中。因此，一旦

App

完成运行，该变量就会被释放。

对于正常的代码执行，这根本不会产生任何影响，因为只有在没有影响的情况下才会执行。只有当您暂停代码（使用

debugger

或断点）时，您才会注意到该变量不存在。