javascript - Nodejs 异步循环正在阻止 React UI 渲染

Question

我有一个 Electron 应用程序，我需要通过 UDP 发送大量数据。这个过程是通过在我的 React UI 中点击一个按钮开始的，这个例子简化了我的问题。我的 React 按钮:

<button
  onClick={() => {
    foo();
  }}
>
  Run foo
</button>;

富函数:

export const foo = async () => {
  while (true) {
    console.log("hello");
  }
};

虽然 foo 是异步的，但它仍然会卡住 React UI!

Answer 1

async 函数在执行时仍然会阻塞主(也是唯一)线程； async 函数通常有帮助，因为它们调用的库函数实际上释放了主线程。

例如，如果你没有做一个简单的无限循环，而是做了这样的事情:

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function yieldThread() {
  return new Promise(resolve => resolve());
}

export const foo = async () => {
  while (true) {
    console.log("hello");
    await timeout(2000);
    //or
    await yieldThread();
  }
};

您的主线程不会被阻塞。

当然，timeout 或简单的 yield 通常不是处理这种情况的正确方法，但它应该是典型结构的例证。

假设您有一个函数 sendUdp(packet, callback)，它的第一个参数是数据包您需要在发送完成后发送一个不带参数的回调，你可以这样做:

export const foo = async () => {
  while (true) {
    const packet = getPacket();
    await new Promise(resolve => {
        sendUdp(packet, resolve);
    });
  }
};