使用React Hooks与可转移对象时detached ArrayBuffer报错解决方案

这个报错的核心触发逻辑有两点：

• 可转移对象通过postMessage转移所有权后，原执行上下文（此处为主线程）持有的ArrayBuffer会被立刻标记为分离（detached）状态，对应内存会被引擎回收，既无法读写，也不能基于它构造新的类型化数组，你之前存在ref/state里的Float32Array只是底层buffer的视图，会随buffer一起失效。
• 你写的const foo = useRef(new Float32Array(myBufferRef.current))存在一个常见的React API误用：useRef传入的初始化参数会在组件每次重渲染时执行求值，React仅会在首次挂载时把求值结果赋值给foo.current，后续渲染的求值结果会被直接丢弃。当你把buffer转移给Worker后，下一次组件重渲染执行到new Float32Array(...)时，传入的是已经分离的失效buffer，就会直接抛出你看到的错误，换成非惰性初始化的useState存储实例会触发完全相同的问题。

要实现缓冲区在主线程和Worker之间的全生命周期正常来回传输，按以下逻辑实现即可：

1. 惰性初始化缓冲区，避免重复构造 #

使用useState的惰性初始化语法创建ArrayBuffer，保证初始化逻辑仅在组件挂载时执行一次，同时用ref存储当前上下文可用的Float32Array视图：

// 惰性初始化ArrayBuffer，初始化函数仅在首次挂载执行
const [buffer, setBuffer] = useState(() => {
  // 替换成你实际需要的缓冲区长度
  const bufferSize = 1024 * Float32Array.BYTES_PER_ELEMENT;
  return new ArrayBuffer(bufferSize);
});

const float32Ref = useRef<Float32Array | null>(null);

// 仅当buffer引用变化时，重建类型化数组视图
useEffect(() => {
  float32Ref.current = new Float32Array(buffer);
}, [buffer]);

2. 主线程发送/接收逻辑 #

转移缓冲区后立刻清空本地失效引用，等Worker处理完传回缓冲区时，更新buffer引用触发视图重建：

// 发送数据到Worker
const sendToWorker = useCallback(() => {
  if (!buffer || !float32Ref.current) return;
  // 写入你要处理的数据到float32Ref.current
  // ......
  // 第二个参数传入转移列表，将buffer所有权转移给Worker
  worker.postMessage(
    { type: 'compute', data: float32Ref.current },
    [buffer]
  );
  // 转移后立刻清空本地视图，避免误操作失效内存
  float32Ref.current = null;
}, [buffer, worker]);

// 监听Worker回传的处理结果
useEffect(() => {
  const handleMessage = (e: MessageEvent) => {
    if (e.data.type === 'computeDone') {
      const returnedBuffer = e.data.data.buffer as ArrayBuffer;
      // 更新buffer引用，上面的effect会自动重建可用的Float32Array视图
      setBuffer(returnedBuffer);
      // 此处可以读取float32Ref.current获取处理后的数据
    }
  };
  worker.addEventListener('message', handleMessage);
  return () => worker.removeEventListener('message', handleMessage);
}, [worker]);

3. Worker侧对应逻辑 #

Worker收到缓冲区后正常执行计算，处理完成后同样以转移方式把buffer发回主线程即可：

// Worker线程代码
self.addEventListener('message', (e) => {
  if (e.data.type === 'compute') {
    const view = new Float32Array(e.data.data.buffer);
    // 执行你的计算逻辑
    for (let i = 0; i < view.length; i++) {
      view[i] = i * Math.random();
    }
    // 计算完成后将buffer转移回主线程
    self.postMessage(
      { type: 'computeDone', data: view },
      [view.buffer]
    );
  }
});

• 不要在任何上下文中操作已经转移走所有权的ArrayBuffer和关联的类型化视图，只要发起转移，当前上下文的对应内存就已经被回收，所有引用都属于失效引用。
• 类型化数组（Float32Array/Uint8Array等）本身不持有内存，只是底层ArrayBuffer的视图，只要底层buffer被转移，所有关联视图都会失效，必须等buffer所有权回到当前上下文后重新创建视图。
• 所有失效的视图、buffer引用要及时置空，避免后续逻辑误读写报错。
• 该实现兼容React严格模式的双挂载逻辑，不会出现重复初始化、操作失效内存的问题。

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