事件监听器和React Hooks

问题：使用React hooks和事件监听器时，状态控制台日志显示不正确的信息。

问题描述

考虑提供的CodeSandbox： https://codesandbox.io/s/lrxw1wr97m。当您单击“添加卡”按钮两次，然后单击第一张卡中的“Button1”时，控制台会正确显示有两张卡的状态。但是，如果您单击同一张卡中的“Button2”（由事件侦听器处理），控制台会错误地仅显示一张卡的状态。

状态不正确的原因

问题源于 CardsProvider 和 Card 组件中事件处理程序的不同处理。每次呈现该组件时，都会重新定义 CardsProvider 功能组件中定义的事件处理程序（handleCardClick 和 handleButtonClick）。这意味着它们引用的是定义时的状态，当触发事件侦听器时，该状态可能会过时。

另一方面，Card 组件使用 useRef 来注册事件侦听器，该事件侦听器会持续存在贯穿组件的整个生命周期。因此，事件侦听器函数引用组件安装时的状态，该状态已过时。

解决方案 - 使用状态更新器函数

一种解决方案是使用状态更新器接收新鲜状态作为参数的函数，而不是依赖于封闭范围中的陈旧状态：

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

在这种情况下，事件侦听器接收最新状态，从而消除了陈旧数据的问题。但是，请务必注意，状态更新器函数可以返回相同的状态以防止不必要的更新。在状态更新器函数中使用 console.log 来观察状态变化。

其他解决方案

解决此问题的替代方法包括：

• Mutable State: 使用 useRef 而不是 useState.
• 手动事件侦听器重新注册：每次状态改变时重新注册事件监听器。
• 内置事件处理：使用 React 的内置事件处理而不是自定义事件监听器。