React函数组件：解决渲染与useEffect间的事件触发间隙问题

问题核心 #

你的代码存在两个关键问题：

1. 组件直接引用全局变量globallyStoredCounter，未将其纳入组件状态，导致全局变量更新后组件不会自动重渲染。
2. useEffect的执行时机在组件渲染完成（DOM更新后），如果异步事件刚好触发在渲染完成后、useEffect注册监听器前，就会漏掉事件，无法触发组件重渲染。

从控制台输出的时序也能明确这个问题：

> Start rendering CounterDisplay: 0
> Notifying event "counter_changed_event" with data {counter: 1}
> Listening to event counter_changed_event

事件触发时监听器还未挂载，自然无法捕获更新。

为什么类组件没遇到这个问题？ #

类组件的componentDidMount确实在组件挂载完成后立即执行，但更关键的是，通常类组件写法中会在componentDidMount里同时完成两件事：同步检查全局变量的当前值并更新状态，再注册监听器。这样即使事件在挂载前触发，初始化时也能拿到最新值；而你的函数组件代码既没在初始化时同步获取最新值，也没处理事件间隙的问题。

解决方案 #

方案1：修复自定义钩子+组件状态绑定 #

先修改组件，将全局变量的值纳入组件状态，初始化时直接获取当前值；同时优化useEvent钩子，避免不必要的监听器重复绑定，并用useRef解决闭包问题：

组件代码修改：

let globallyStoredCounter = 0; 

export default function CounterDisplay(): React.JSX.Element {
    // 初始化时直接获取全局变量的当前值
    const [counter, setCounter] = useState(globallyStoredCounter);
    
    // 传入事件触发后的回调：更新状态为全局变量的最新值
    useEvent('counter_changed_event', () => {
        setCounter(globallyStoredCounter);
    });

    console.log('Start rendering CounterDisplay: ', counter);
    return (
        <div>{counter}</div>
    );
}

自定义钩子修改：

import { useEffect, useRef } from 'react';

export function useEvent(eventName: string, handler: (event: Event) => void) {
    // 用ref保存最新的handler，避免闭包导致的旧值问题
    const handlerRef = useRef(handler);
    useEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    // 仅在组件挂载时注册一次监听器，卸载时移除
    useEffect(() => {
        const handleEvent = (event: Event) => {
            handlerRef.current(event);
        };

        window.addEventListener(eventName, handleEvent);
        return () => {
            window.removeEventListener(eventName, handleEvent);
        };
    }, [eventName]);
}

方案2：使用React官方的useSyncExternalStore（推荐） #

React 18引入了useSyncExternalStore，专门用于订阅外部状态（比如全局变量、第三方状态库），它会自动处理初始化快照获取、订阅更新，完全消除事件间隙问题：

全局状态与订阅逻辑：

import { useSyncExternalStore } from 'react';

let globallyStoredCounter = 0;
// 存储所有订阅的监听器
const updateListeners = new Set<() => void>();

// 订阅函数：添加监听器，返回取消订阅的函数
function subscribe(listener: () => void) {
    updateListeners.add(listener);
    return () => updateListeners.delete(listener);
}

// 获取当前状态快照
function getCounterSnapshot() {
    return globallyStoredCounter;
}

// 修改触发事件的代码：更新全局变量后通知所有监听器
fetch('http://localhost/api/something').then(_ => {
   globallyStoredCounter += 1;
   console.log(`Notifying update with data`, {counter: globallyStoredCounter});
   // 通知所有订阅的组件更新
   updateListeners.forEach(listener => listener());
}); 

组件代码：

export default function CounterDisplay(): React.JSX.Element {
    // 直接订阅外部状态，自动获取最新值
    const counter = useSyncExternalStore(subscribe, getCounterSnapshot);
    
    console.log('Start rendering CounterDisplay: ', counter);
    return (
        <div>{counter}</div>
    );
}

这个方案无需手动管理监听器和状态更新，React会确保组件始终获取到最新的外部状态，完全避免时序间隙问题。

内容的提问来源于stack exchange，提问作者Beragrom