React Hook useState状态更新异常及事件监听疑问求助

嘿，我来帮你拆解这两个让人困惑的问题，其实核心都和React函数组件的渲染机制以及闭包有关～

问题1：为什么视图的count更新了，但事件回调里输出的是旧值？ #

这是闭包的典型表现。React函数组件每次状态更新后，都会重新执行整个组件函数，生成一个全新的“渲染快照”——包括当前的count值、add函数、checkCount函数都是这个快照里的独立副本。

当你点击按钮调用add时：

• setCount(count + 1)会触发组件重新渲染，生成新的count（比如从0变成1），视图也会更新成这个新值。
• 但你在add里添加的checkCount，是当前渲染快照里的版本，它捕获的是当前快照里的count值（也就是0）。
• 组件重新渲染后，会生成新的checkCount函数（捕获新的count=1），但之前添加到document上的事件监听，依然引用着旧的checkCount（捕获count=0），所以当你点击外部时，输出的还是旧值。

简单说：每个checkCount都“记住”了自己被创建时的count，后续状态更新产生的新checkCount和旧的没关系，而旧的事件监听还在生效。

问题2：用setCount(10)多次点击后，为什么只有2条日志？ #

这个问题结合了React的状态更新逻辑和事件监听的规则：

1. 第一次点击按钮：setCount(10)把count从0改成10，触发组件重新渲染，生成新的add和checkCount（捕获count=10），此时你添加了一个事件监听（旧的checkCount，捕获count=0）。
2. 第二次点击按钮：当前count已经是10，setCount(10)不会触发组件重新渲染（React会跳过无状态变化的渲染），所以你调用的add还是第一次渲染后的版本（也就是捕获count=10的那个add），它会添加新的checkCount（捕获count=10）。
3. 第三次及以后点击按钮：因为count还是10，setCount(10)依然不会触发渲染，你调用的还是同一个add函数，它每次尝试添加的都是同一个checkCount（捕获count=10）。但document.addEventListener对于同一个事件类型和同一个回调函数引用，重复添加是无效的，所以不会新增监听。

最终document上只有两个有效监听：第一次添加的（捕获count=0）和第二次添加的（捕获count=10），所以点击外部会输出两条日志。

解决方案：两种常见思路 #

思路1：用useRef保存最新状态 #

useRef的current属性是可变的，不会受渲染快照影响，可以随时获取最新的count值：

import React, { useState, useRef, useEffect } from "react";
function Example() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 同步state到ref，保证ref始终是最新值
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const add = () => {
    setCount(count + 1);
    // 每次添加前先移除旧监听，避免重复
    document.removeEventListener("click", checkCount);
    document.addEventListener("click", checkCount);
  };

  const checkCount = () => {
    // 这里取ref.current，永远是最新的count
    console.log(countRef.current);
  };

  // 组件卸载时清理监听，防止内存泄漏
  useEffect(() => {
    return () => {
      document.removeEventListener("click", checkCount);
    };
  }, [checkCount]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <p>Click button first then click outside button and see console</p>
      <button onClick={() => add()}>Click me</button>
    </div>
  );
}
export default Example;

思路2：用useEffect管理事件监听 #

把事件监听的添加/移除交给useEffect，依赖count，这样每次count更新时都会重新绑定监听：

import React, { useState, useEffect } from "react";
function Example() {
  const [count, setCount] = useState(0);
  const [isListening, setIsListening] = useState(false);

  const add = () => {
    setCount(count + 1);
    setIsListening(true);
  };

  const checkCount = () => {
    console.log(count);
  };

  useEffect(() => {
    if (isListening) {
      document.addEventListener("click", checkCount);
      // 清理函数：移除监听，或者停止监听
      return () => {
        document.removeEventListener("click", checkCount);
        // 可选：点击后停止监听，避免重复触发
        setIsListening(false);
      };
    }
  }, [count, isListening]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <p>Click button first then click outside button and see console</p>
      <button onClick={() => add()}>Click me</button>
    </div>
  );
}
export default Example;

内容的提问来源于stack exchange，提问作者Trần Hồng