如何在React中监听所有状态变更？解决批量更新丢失问题

问题根源是React在批量更新阶段会合并多次状态更新，你用单个对象作为状态时，后续的setState会直接覆盖之前的更新，最终只有最后一次配置生效。要实现捕获所有更新并依次应用，数组是最合适的队列数据结构，每次将新配置追加到队列中，再逐个取出处理。

修改后的代码示例：

export default function MyPlugin() {
  const { component: Plugin, instance } = useMyPlugin()
  // 将状态改为数组队列，初始包含第一个配置
  const [configQueue, setConfigQueue] = useState<Record<string, string>[]>([
    { config: "config-update-1" },
  ]);

  // 每个初始化逻辑中往队列追加新配置，而非覆盖原有状态
  useEffect(() => {
    setConfigQueue(prev => [...prev, { config2: "config-update-2" }]);
  }, []);

  useEffect(() => {
    setConfigQueue(prev => [...prev, { config3: "config-update-3" }]);
  }, []);

  useEffect(() => {
    setConfigQueue(prev => [...prev, { config4: "config-update-4" }]);
  }, []);

  useEffect(() => {
    // 队列不为空时处理第一个配置项
    if (configQueue.length === 0) return;

    const currentConfig = configQueue[0];
    console.log("my plugin will update config using " + JSON.stringify(currentConfig));
    instance.load(currentConfig);

    // 处理完成后从队列中移除已处理的配置
    setConfigQueue(prev => prev.slice(1));
  }, [configQueue, instance]);

  return (
    <div>
      <Plugin/>
    </div>
  );
}

核心逻辑说明 #

• 用数组存储配置队列，通过prev => [...prev, newConfig]的方式更新状态，确保不会丢失之前的配置项
• 监听队列变化的useEffect每次只处理队列的第一项，处理完成后移除该项，保证所有配置被依次执行
• 依赖项中加入instance，确保当instance发生变化时能正确关联处理逻辑

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