React.useMemo() 和事件监听器

Question

我正在使用 Hooks 构建一个 REACT 应用程序，现在我在使用useMemo()和一些事件侦听器时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是它的依赖项之一。
到现在为止还挺好：

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

现在，问题来了，我不明白！ 我可以以某种方式接受这样一个事实，即第四行控制台告诉我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 行设置后无法真正log更新的状态

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