解决React事件处理函数中闭包捕获陈旧状态的问题

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

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext); // 假设socket已通过Context提供
  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(() => {
    // 注册WebSocket事件监听器
    socket.on("newNotification", (payload) => {
      // ... 某些业务逻辑
      showCurrent(); // 调用内部函数
    });

    return () => {
      // 清理事件监听器
      socket.off("connect"); // 示例中未使用的监听器，但清理是良好实践
      socket.off("newNotification");
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 依赖数组为空

  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变化时，都会重新注册事件监听器
    socket.on("newNotification", (payload) => {
      showCurrent(); // 此时的showCurrent闭包捕获了最新的current值
    });

    return () => {
      // 每次重新注册前，先清理旧的监听器
      socket.off("newNotification");
    };
  }, [current, socket]); // 将current和socket加入依赖数组

  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);
  const currentRef = useRef(current); // 创建一个ref并初始化为当前current值

  // 使用useEffect来同步ref的值与state的值
  useEffect(() => {
    currentRef.current = current; // 每次current更新时，更新ref的.current属性
  }, [current]); // 依赖current，确保ref始终是最新值

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

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

  useEffect(() => {
    // 注册WebSocket事件监听器，这次只注册一次
    socket.on("newNotification", (payload) => {
      // ...
      showCurrentFromRef(); // 调用使用ref的函数
    });

    return () => {
      socket.off("newNotification");
    };
    // 这里的依赖数组可以保持为空，因为showCurrentFromRef内部通过ref访问最新值
  }, [socket]); // 仅依赖socket，因为socket通常是稳定的

  return (
    <>
      {/* JSX中的onClick仍然可以直接使用原始的showCurrent，因为它每次渲染都会更新 */}
      <button onClick={showCurrentFromRef}>show (from ref)</button> 
      <button onClick={incrementCurent}>increment</button>
    </>
  );
};