React 编译器可以编译为本机 JS 吗？

Question

我读过一些关于 Svelte 的内容 - 如果我理解正确的话，源代码会编译为本机 js。这与 React 不同，React 的状态管理逻辑对于开发/生产是相同的（即生产中有 React 导入）。

但是现在有了React编译器/将会有React编译器，React源代码可以编译为原生js的可能性有多大？

有什么原因无法做到这一点吗？如果可以的话，那么在我看来，除了编码风格的偏好之外，Svelte 相对于 React 并没有任何特别的优势。

Answer 1

我可能错了，但我认为事情是这样的：

在我们拥有的所有客户端渲染框架中，通常将所有内容分为两部分：

• 状态（应该在屏幕上可视化的数据（在JS中使用数字、字符串、对象、数组等））
• GUI（描述如何可视化状态（使用 HTML、CSS 和一些模板语言））

我们（很多很多年前）得到的第一个都是以一种非常简单的方式实现的：当状态发生变化时，重新渲染所有内容。这基本上意味着丢弃旧 DOM 的所有内容，并创建所有新内容并将其插入到 DOM 中。非常容易实现，但是每次一些小的变化（比如数字从

5

变为

6

），整个DOM都需要重新渲染，所以它不是以一种非常有效的方式实现的，而且大网页会每次重新渲染时都会出现明显的延迟。

很多框架开始使用虚拟 DOM 来代替：渲染的 GUI 创建一个虚拟 DOM，然后框架将虚拟 DOM 与实际 DOM 进行比较，在不同的地方，它告诉 Web 浏览器更新那些 DOM 部分。因此，Web 浏览器需要花费更少的时间来更新 DOM，从而运行得更快一些。将虚拟 DOM 与实际 DOM 进行比较是引入了新的性能成本，但总的来说它运行得更快，因此即使有额外的成本，它也是一个更好的解决方案。

然后 Svelte 尝试进一步优化它，避免创建虚拟 DOM，并在编译时找出当不同事件发生时需要更新 DOM 的哪些部分。这很难做到，但可以缩短渲染时间。

所以，关于新的 React 编译器：

编译器做什么？

为了优化应用程序，React Compiler 会自动记住您的代码。您今天可能熟悉通过 useMemo、useCallback 和 React.memo 等 API 进行记忆。通过这些 API，您可以告诉 React 应用程序的某些部分如果其输入没有更改，则不需要重新计算，从而减少更新工作。虽然功能强大，但很容易忘记应用记忆或错误地应用它们。这可能会导致更新效率低下，因为 React 必须检查 UI 中没有任何有意义更改的部分。

即，编译器似乎只是做了一些程序员可能忘记做/将来不需要手动做的优化。

因此，基于此，React 似乎仍然会生成虚拟 DOM，因此 Svelte 和其他虚拟 DOM 框架之间的主要区别仍然存在。