javascript - React.useMemo() 和事件监听器

Question

我正在使用 Hooks 构建一个 REACT 应用程序，现在在使用 useMemo() 和一些事件监听器时遇到问题。我已经在 CodeSandBox 上准备了一个更简单的演示来解决我的问题:这是链接 → https://codesandbox.io/s/mystifying-hertz-21jov?fontsize=14&hidenavigation=1&theme=dark .

现在，让我解释一下问题出在哪里:我有 buttonData，它是使用 useMemo() 计算的。现在，让我们看一下控制台输出:

首先，buttonData 在第一次渲染时计算，并且 buttonData.behavior 等于 test1。然后，当我输入按钮时，在 onMouseEnterButton 内使用 setTargetDOM:这将触发 buttonData 重新计算，因为 setTargetDOM code> 是其依赖项之一。
到目前为止，一切顺利:

1. 在控制台第一行，我们看到 buttonData.behavior 是 test1；
2. 在第二行中，我们看到输入了 onMouseEnterButton，现在 buttonData.behavior 是 test1；
3. 在第三行中我们看到，由于 targetDOM 发生了变化，我们再次计算了 buttonData，现在 buttonData.beavhior 等于测试2;

现在问题来了，我不明白!我可以以某种方式接受这样一个事实:第四个控制台行告诉我 buttonDat.behavior 仍然是 test1，因为我们仍然处于更改 targetDOM< 的同一函数中 从而触发 buttonData 更改(即使我希望在第四行看到 buttonData.behavior: test2 。

更糟糕的是，在 onMouseMoveButton 中，我看到 buttonData.behavior 等于 test1，而不是 test2 >..

问题很简单..为什么？我的意思是，我认为以这种方式实现我有 test2，但我想我在这里缺少一些 React Hook 的东西。

Answer 1

onMouseMoveButton 和 onMouseEnterButton 在第一次渲染时捕获 buttonData.behavior，并且因为您从不更新事件监听器，所以它们将始终引用初始值buttonData.behavior 的值

您可以做的是将 buttonData.behavior 添加到 useLayoutEffect 的依赖项数组中，每次 buttonData.behavior 更改时都会运行返回的函数并删除以前的监听器并添加新监听器

React.useLayoutEffect(() => {
  ...
}, [buttonData.behavior])

此外，状态更新是异步的，因此在第 4 行中，您无法在设置后真正记录更新的状态

setTargetDOM(e.currentTarget);
// this will never the updated value because 
// the state updater hasn't run yet
console.log(buttonData.behavior);