React事件处理中状态值滞后的深度解析与解决方案

import { useContext, useEffect, useState } from "react";
// 假设 WebsocketContext 提供了 socket 实例
// import { WebsocketContext } from './WebsocketContext'; 

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext); // 假设这里获取了socket实例
  const [current, setCurrent] = useState(0);

  console.log("dashboard is rerendering...");

  const showCurrent = () => {
    console.log("showCurrent is running and current = ", current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    // 这里的 showCurrent 是在组件首次渲染时捕获的闭包版本
    socket.on("newNotification", (payload) => {
      // ...
      showCurrent(); 
    });
    return () => {
      // 清理事件监听器
      socket.off("connect");
      socket.off("newNotification");
    };
    // 依赖项数组为空，表示此 effect 只在组件挂载时运行一次
  }, []); 

  return (
    <>
      <button onClick={showCurrent}>show</button>
      <button onClick={incrementCurent}>increment</button>
    </>
  );
}

import { useContext, useEffect, useState } from "react";

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);

  const showCurrent = () => {
    console.log("showCurrent is running and current = ", current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    // 每次 current 变化时，都会重新注册 newNotification 事件
    // 此时的 showCurrent 捕获了最新的 current 值
    socket.on("newNotification", (payload) => {
      // ...
      showCurrent(); 
    });
    return () => {
      // 清理旧的事件监听器
      socket.off("connect");
      socket.off("newNotification");
    };
    // 将 current 添加到依赖项数组
  }, [current, socket]); // 注意：如果 socket 实例可能变化，也应加入依赖
                           // 实际应用中，socket 实例通常是稳定的，但为了严谨性，可以加上
                           // 如果 socket 是通过 useContext 获取且不会变，可以只依赖 current
  return (
    <>
      <button onClick={showCurrent}>show</button>
      <button onClick={incrementCurent}>increment</button>
    </>
  );
}

import { useContext, useEffect, useState, useRef } from "react";

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);
  // 创建一个 ref 来存储 current 状态的最新值
  const currentRef = useRef(current); 

  // 使用 useEffect 确保 currentRef.current 始终与 current 状态同步
  useEffect(() => {
    currentRef.current = current;
  }, [current]); // 仅当 current 状态变化时更新 ref

  const showCurrent = () => {
    // 从 ref 中读取最新的 current 值
    console.log("showCurrent is running and current = ", currentRef.current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    // 这里的 showCurrent 可以保持不变，因为它通过 currentRef.current 访问最新值
    socket.on("newNotification", (payload) => {
      // ...
      showCurrent(); 
    });
    return () => {
      socket.off("connect");
      socket.off("newNotification");
    };
    // 依赖项数组为空，此 effect 只在组件挂载时运行一次，不会因 current 变化而重新订阅
  }, [socket]); // 仅依赖 socket 实例，如果它稳定，可以为空数组
                // 如果 socket 实例是通过 useContext 获取且不会变，可以只依赖 []
                // 在此示例中，假设 socket 实例是稳定的，所以 [] 也是可行的
                // 确保 showCurrent 函数在闭包中捕获的是 currentRef 的引用，而不是 current 的值
  return (
    <>
      <button onClick={showCurrent}>show</button>
      <button onClick={incrementCurent}>increment</button>
    </>
  );
}