使用 WebWorkers 渲染 React 组件

Posted 2023-02-18

【中文标题】使用 WebWorkers 渲染 React 组件

【英文标题】：Rendering React components with WebWorkers

【发布时间】：2016-03-23 08:18:27

【问题描述】：

我在网上看到了一些关于使用 html5 WebWorkers 渲染 React 组件的内容。甚至 React 背后的负责人 Pete Hunt 也在谈论它。

我对数组的每个元素进行了一些 CPU 密集型工作，然后对数组的每个元素进行 React 渲染，因此我正在考虑将每个元素放入 WebWorker，然后将 HTML 字符串发布回主 UI线程。

我的问题是 - 看起来 React.renderToString 已被 ReactDOMServer.renderToString 弃用...所以我问你们所有人和 Pete Hunt - 如果我们希望使用，我们应该在前端使用 ReactDOMServer WebWorkers 来渲染 React 组件还是有其他推荐的方法？

（当然是因为我们在JS中只能在线程之间传递字符串/序列化的数据，所以思路是把React组件渲染成字符串，然后作为字符串传回主UI线程。）

【问题讨论】：

想一想，你真的需要在 webworker 中渲染组件吗？如果不是更有效，那么简单地将数组数据传回就足够了吗？

好吧，在渲染之前还有很多其他工作要做，但是渲染可以在 webworker 中进行，也可以不在，但是因为我已经在使用 WW，所以我想，不妨当我在那里的时候也在那里做渲染。为了这个问题，假设它是必要的/或真正需要的:)

好吧，我会说如果它在浏览器上运行而无需修改，那为什么不呢。它可能不会仅仅因为它是一个小众用例而被提倡。但是，嘿，如果它有效并且性能令人满意，我会说运行它。

据说虚拟 DOM 差异有点密集，所以在某些情况下它实际上可能性能更高，但在大多数情况下可能不是，因为您已经跨线程发送了所有这些数据。我认为它确实可以使用 ReactDOMServer。 ReactDOMServer 代码只有 20 行左右，似乎是某种简单的包装器。

我认为ReactDOMServer 可能更适合命名为ReactDOMStatic，但您也可以将您的网络工作者视为一种“服务器”。简而言之，在任何想要从组件渲染 static HTML 的 JS 环境中使用它都可以。

【参考方案1】：

我写了一个 React 的快速实现，在 Web Worker 中渲染。它并不是真正的renderToString，而更像是一个自定义渲染器。我还发现这比正常的实现要快得多。

演示页面有 2 个应用程序 - 一个显示 CPU 密集型应用程序的示例，以及一个包含事件的简单 TODO 列表。

这也是性能数字 -http://blog.nparashuram.com/2016/02/using-webworkers-to-make-react-faster.html