为什么 `React.renderToNodeStream` 不屈服于事件循环？

Question

我试图让 React 的 renderToString 和 renderToStaticMarkup 成为更好的公民，方法是屈服于允许其他服务器请求查看的事件循环，例如

const React = require('react');
const { renderToNodeStream } = require('react-dom/server');

// Wrap `renderToNodeStream` in promise
const renderToStringAsync = node => {
  return new Promise((resolve, reject) => {
    let body = '';
    const stream = renderToNodeStream(node);
    // NOTE: we're turning the tap on full blast here, but I still expected it to yield
    stream.on('data', chunk => {
      console.log('Received chunk');
      body += chunk.toString();
    });
    stream.on('error', ex => {
      reject(ex);
    });
    stream.on('end', () => {
      resolve(body);
    });
  });
};

setTimeout(() => {
  console.log('Yielded to event loop');
}, 0)
await renderToStringAsync(largeRootNode);

我期望这样：

// Expect:
// Received chunk
// Yielded to event loop
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk

但我真的明白了：

// Actual:
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Received chunk
// Yielded to event loop

我想知道是否与.on('data')有关；我知道它不管理背压，但我一直认为它会是异步的？

NOTE: I'm not piping the response to the client as I need to wait for the render to complete before determining the status code; I merely want to use renderToNodeStream to improve cooperative multitasking in node.js)

Answer 1

Promise 执行器同步执行 so is ReactDOMNodeStreamRenderer. The _read method of ReactDOMNodeStreamRender has no asynchronous components and will be called synchronously as per the method contract in Node.

总之，这里的整个代码块都是同步执行的，不涉及同步。流式接口只是提供了异步执行的可能性，也使得通过管道传输到确实异步写入的流变得稍微容易一些。

重要的是要注意流接口本身并不使任何操作异步！

为什么 `React.renderToNodeStream` 不屈服于事件循环？

Why does `React.renderToNodeStream` not yield to the event loop?

javascript

node.js

reactjs

server-side-rendering

react-dom-server