reactjs - react 中 useState 如何与 eventListener 配合使用

Question

在下面的沙箱项目中，我尝试使用自定义 Hook 来附加事件监听器。

在 useEventListener.js 文件中，如果我将 savedHandler.current 函数直接传递给事件监听器(第 21 行)，我在状态更新期间不会获得更新后的状态值。只有当我在匿名函数(第 19 行)中使用 savedHandler.current 函数时，我才会获得更新后的状态值。

有人可以帮助我了解这是如何工作的吗？是因为这个引用吗？

https://codesandbox.io/s/gracious-cloud-kjw7dk?file=/src/useEventListener.js

谢谢

Answer 1

这是我能解释的最好的:

对于上下文，当您单击 toggle flag 按钮时，只有第一个 useEffect(callback,[handler]) 在每次渲染后运行，第二个 useEffect(callback,[eventName,element]) 在初始渲染后仅运行一次。

1. 现在，当您将 savedHandler.current 直接传递给事件监听器时，第 21 行，事件监听器按原样附加 useCallback 返回的函数，因此在每个事件上，由于 原因 调用了相同的函数:事件仅注册一次并且清理函数未运行，因为 useEffect 在初始渲染后仅运行一次(清理函数将在实例中运行，就在由于依赖项更改导致下一个副作用之前，以及组件卸载时)。因此，您只需使用一个跨渲染持续存在的记忆化回调来注册事件一次。在第一个 useEffect 中更新 savedHandler.current 不会更新在第二个 useEffect 中传递给事件监听器的回调，因为它不会重新运行，因此不会更新传递给事件监听器的回调。
2. 现在，当您在匿名函数中使用savedHandler.current 函数时，情况就完全不同了。当您将此类函数作为回调传递时，与第一个实例不同，每个事件都会调用一个新函数。尽管具有相同的代码，但第一个事件和第二个事件的匿名回调并不相同。所以在这里你不会被你之前传递的相同事件监听器回调所困，因此你现在可以访问由第一个 useEffect 更新的回调函数内的最新内存 savedHandler.current 值，尽管有第二个效果不再运行。

就是这样。为了自己确认，尝试将 handler 添加为对第二个 useEffect 的依赖，并将 savedHandler.current 直接传递给事件监听器.您将获得更新后的状态值，因为 useEffect 现在在 handler 每次更新后运行，并且事件监听器获得最新的回调以调用。而不是创建另一个变量，您可以直接执行 element.addEventListener(eventName, (event) => savedHandler.current(event));