React封装非React插件：回调中状态维护失效问题及解决

问题背景 #

非React插件代码 #

// Non-React Plugin
export interface MyPluginSettings {
  container: string;
  someCallback: () => void;
}

class MyPlugin {
  settings: MyPluginSettings;

  start(settings: MyPluginSettings) {
    const domElement = document.getElementById(settings.container);
    if (domElement) {
      const newButton = document.createElement("button");
      newButton.textContent = "I will trigger `someCallback`!";
      newButton.addEventListener("click", settings.someCallback);
      domElement.appendChild(newButton);
    }
  }
}

export { MyPlugin };

封装组件代码 #

// Wrapper Component
import React, { useState, useEffect } from "react";
import { MyPlugin, MyPluginSettings } from "./MyPlugin";

interface MyPluginWrapperProps {
  configuration: MyPluginSettings;
}

const MyPluginWrapper = ({ configuration }: MyPluginWrapperProps) => {
  const [started, setStarted] = useState(false);

  useEffect(() => {
    if (!started) {
      setStarted(true);
      const plugin = new MyPlugin();
      plugin.start(configuration);
    }
  }, [configuration, started]);

  return <div id="plugin-container" />;
};

export { MyPluginWrapper };

应用中使用封装组件的代码 #

import { MyPluginWrapper } from "./MyPluginWrapper";
import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);

  const handleOnClick = () => {
    setCounter(counter + 1);
  };

  return (
    <>
      <button onClick={handleOnClick}>Increment Counter</button>
      <span>The counter is at {counter}</span>
      <MyPluginWrapper
        configuration={{
          container: "plugin-container",
          someCallback: () => {
            alert("the counter is " + counter);
          },
        }}
      />
    </>
  );
}

问题描述 #

点击插件生成的按钮时，弹窗始终显示the counter is 0，无论点击React应用内的递增按钮多少次。本质是闭包陷阱：插件初始化时绑定的someCallback是组件第一次渲染时的闭包，捕获了初始状态counter=0；后续React状态更新会生成新的回调函数，但插件并未更新事件监听，因此触发的始终是旧回调。

现有解决方案及局限 #

方案1：useRef同步状态 #

通过useRef存储最新状态，再在回调中访问ref.current。但每新增一个状态就需要新增对应的ref和同步useEffect，扩展性差。

const [counter, setCounter] = useState(0)
const counterRef = useRef(0)
useEffect(() => { counterRef.current = counter }, [counter])

// ...

return (
  <MyPluginWrapper
    configuration={{
      container: "plugin-container",
      someCallback: () => {
        alert("the counter is " + counterRef.current);
      },
    }}
  />
)

方案2：利用状态更新的函数式写法 #

通过setCounter的函数式参数获取最新状态，但仅适用于当前状态的更新场景，无法直接获取其他Hook的状态或外部属性。

const [counter, setCounter] = useState(0)

//...

return (
  <MyPluginWrapper
     configuration={{
       container: "plugin-container",
       someCallback: () => {
         setCounter(counter => {
            alert("the counter is " + counter);          
            return counter
         })
       },
    }}
  />
)

可扩展的解决方案 #

方案A：单Ref统一管理所有状态 #

用一个useRef存储所有需要访问的状态，通过单个useEffect同步更新，配合useCallback生成稳定的回调函数。这种方法无需修改插件，且支持任意数量的状态扩展。

import { MyPluginWrapper } from "./MyPluginWrapper";
import React, { useState, useRef, useEffect, useCallback } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  // 用ref统一管理需要在回调中访问的状态
  const stateRef = useRef({ counter });

  // 同步所有状态到ref
  useEffect(() => {
    stateRef.current = { ...stateRef.current, counter };
  }, [counter]);

  // 生成稳定的回调，始终访问最新的ref值
  const stableCallback = useCallback(() => {
    alert("the counter is " + stateRef.current.counter);
  }, []);

  const handleOnClick = () => {
    setCounter(counter + 1);
  };

  return (
    <>
      <button onClick={handleOnClick}>Increment Counter</button>
      <span>The counter is at {counter}</span>
      <MyPluginWrapper
        configuration={{
          container: "plugin-container",
          someCallback: stableCallback,
        }}
      />
    </>
  );
}

方案B：修改插件与封装组件支持回调更新 #

如果有权限修改插件，可以给插件添加更新回调的方法，让封装组件在配置变化时自动更新事件监听，从根源解决闭包问题。

1. 修改插件代码

export interface MyPluginSettings {
  container: string;
  someCallback: () => void;
}

class MyPlugin {
  settings: MyPluginSettings;
  buttonElement?: HTMLButtonElement;

  start(settings: MyPluginSettings) {
    const domElement = document.getElementById(settings.container);
    if (domElement) {
      const newButton = document.createElement("button");
      newButton.textContent = "I will trigger `someCallback`!";
      newButton.addEventListener("click", settings.someCallback);
      domElement.appendChild(newButton);
      this.buttonElement = newButton;
      this.settings = settings;
    }
  }

  // 添加更新回调的方法
  updateCallback(newCallback: () => void) {
    if (this.buttonElement && this.settings.someCallback) {
      // 移除旧监听，添加新监听
      this.buttonElement.removeEventListener("click", this.settings.someCallback);
      this.buttonElement.addEventListener("click", newCallback);
      this.settings.someCallback = newCallback;
    }
  }
}

export { MyPlugin };

2. 修改封装组件

import React, { useState, useEffect, useRef } from "react";
import { MyPlugin, MyPluginSettings } from "./MyPlugin";

interface MyPluginWrapperProps {
  configuration: MyPluginSettings;
}

const MyPluginWrapper = ({ configuration }: MyPluginWrapperProps) => {
  const pluginRef = useRef<MyPlugin | null>(null);
  const [started, setStarted] = useState(false);

  useEffect(() => {
    if (!started) {
      setStarted(true);
      const plugin = new MyPlugin();
      plugin.start(configuration);
      pluginRef.current = plugin;
    } else {
      // 配置变化时更新插件的回调
      if (pluginRef.current) {
        pluginRef.current.updateCallback(configuration.someCallback);
      }
    }
  }, [configuration, started]);

  return <div id="plugin-container" />;
};

export { MyPluginWrapper };

这样App组件无需额外修改，每次状态更新生成新的回调后，封装组件会自动更新插件的事件监听，确保触发的是最新的回调。

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