React应用中WebAssembly模块的跨框架共享与统一访问

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
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} /> {/* 将wasm实例作为prop传递或通过Context提供 */}
    </React.StrictMode>
  );
});

// src/utils/wasm-loader.js
import init from 'my-lib'; // 导入你的WASM模块入口

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

/**
 * 获取WebAssembly实例的异步函数。
 * 确保WASM模块只初始化一次，并返回同一个Promise。
 * @returns {Promise<any>} 返回一个Promise，解析后为WASM实例。
 */
export function getWasm() {
  if (!wasmPromise) {
    // 如果wasmPromise为null，则首次调用init()并缓存其Promise
    wasmPromise = init();
  }
  // 返回缓存的Promise，无论是首次调用还是后续调用
  return wasmPromise;
}

// src/timer.js
import { getWasm } from './utils/wasm-loader'; // 导入我们封装的getWasm函数

let timerInterval;
let wasmInstance;

// 异步获取WASM实例并初始化计时器
getWasm().then(wasm => {
  wasmInstance = wasm;
  console.log('WASM实例在原生JS中可用:', wasmInstance);
  // 现在可以使用wasmInstance.myWasmFunction()等
  // 例如，如果WASM导出了一个处理时间戳的函数
  // timerInterval = setInterval(() => {
  //   const currentTime = wasmInstance.get_current_timestamp();
  //   console.log('WASM处理的时间戳:', currentTime);
  // }, 1000);
}).catch(error => {
  console.error('加载WASM失败:', error);
});

export function startTimer() {
  // 假设这里需要WASM实例来做一些启动前的计算
  if (wasmInstance) {
    console.log('计时器启动，WASM实例已就绪');
    // 可以调用wasmInstance的函数
  } else {
    console.warn('WASM实例尚未加载，请稍候再试或等待Promise解析');
  }
}

export function stopTimer() {
  clearInterval(timerInterval);
  console.log('计时器停止');
}

// src/components/MyReactComponent.jsx
import React, { useEffect, useState } from 'react';
import { getWasm } from '../utils/wasm-loader';

function MyReactComponent() {
  const [wasmModule, setWasmModule] = useState(null);

  useEffect(() => {
    getWasm().then(wasm => {
      setWasmModule(wasm);
      console.log('WASM实例在React组件中可用:', wasm);
    }).catch(error => {
      console.error('加载WASM失败:', error);
    });
  }, []); // 空数组确保只运行一次

  if (!wasmModule) {
    return <div>加载WebAssembly模块...</div>;
  }

  // 使用wasmModule
  const result = wasmModule.my_wasm_calculation(10, 20);

  return (
    <div>
      <p>WASM计算结果: {result}</p>
    </div>
  );
}

export default MyReactComponent;