在React项目中统一管理与访问WebAssembly模块

import init from 'my-lib'; // 假设my-lib是WASM模块的入口

init().then((wasm) => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App wasm={wasm} />
    </React.StrictMode>
  );
});

// my-wasm-wrapper.js
import init from 'my-lib'; // 导入WASM模块的初始化函数

let wasmPromise = null; // 用于缓存WASM初始化Promise的变量

/**
 * 获取WASM模块实例的异步函数。
 * 该函数确保WASM模块只被初始化一次，并返回一个Promise，
 * 该Promise解析后会提供WASM实例。
 *
 * @returns {Promise<any>} 一个解析为WASM模块实例的Promise。
 */
export function getWasm() {
  // 如果wasmPromise尚未被初始化，则调用init()并缓存其返回的Promise
  if (!wasmPromise) {
    wasmPromise = init();
  }
  // 无论何时调用，都返回同一个Promise
  return wasmPromise;
}

// timer-module.js (一个非React的纯JS文件)
import { getWasm } from './my-wasm-wrapper';

// 假设这个模块需要使用WASM函数进行一些计算
export function startTimerWithWasmCalculation() {
  getWasm().then(wasm => {
    // 在这里可以使用wasm对象导出的函数
    console.log("WASM模块已加载，可以在计时器逻辑中使用。");
    const result = wasm.perform_heavy_calculation(100, 200);
    console.log("WASM计算结果:", result);

    // 启动计时器等其他逻辑
    setInterval(() => {
      // 可以在计时器回调中继续使用wasm实例
      const updateResult = wasm.another_wasm_function();
      // ...
    }, 1000);
  }).catch(error => {
    console.error("加载WASM模块失败:", error);
  });
}

// 导出其他函数供React组件订阅
export function subscribeToTimerEvents(callback) {
  // ...
}

// MyReactComponent.jsx
import React, { useEffect, useState } from 'react';
import { getWasm } from './my-wasm-wrapper';

function MyReactComponent() {
  const [wasmInstance, setWasmInstance] = useState(null);
  const [calculationResult, setCalculationResult] = useState(null);

  useEffect(() => {
    getWasm().then(wasm => {
      setWasmInstance(wasm);
    }).catch(error => {
      console.error("在React组件中加载WASM失败:", error);
    });
  }, []); // 空依赖数组确保只在组件挂载时运行一次

  const handleCalculate = () => {
    if (wasmInstance) {
      const result = wasmInstance.perform_heavy_calculation(50, 75);
      setCalculationResult(result);
    }
  };

  return (
    <div>
      <h2>WASM集成示例</h2>
      {wasmInstance ? (
        <>
          <p>WASM模块已加载。</p>
          <button onClick={handleCalculate}>执行WASM计算</button>
          {calculationResult && <p>计算结果: {calculationResult}</p>}
        </>
      ) : (
        <p>正在加载WASM模块...</p>
      )}
    </div>
  );
}

export default MyReactComponent;