Meta 发布开源 React 编译器：开发者无痛升级，爽翻天！

作者 | Loraine Lawson

译者 | 刘雅梦

策划 | Tina

Meta 周三在拉斯维加斯举行的 React 大会上发布了 React 的开源编译器，并进行了直播。Meta React 团队成员、用户界面工程师 Joe Savona 表示，该团队在过去几年中一直在开发编译器。

“React Compiler 会自动优化组件和钩子，因此只有 UI 的最小部分会随着状态的变化而更新。”Savona 告诉听众。“所以这看起来很神奇。”

为什么要使用 React Compiler？

为什么解释语言需要编译器？Savona 将 React Compiler 与 Meta 的 Hermes 和 V8 Alliance 的 V8 进行了比较，后者是包含了编译器的 JavaScript 引擎。

“React Compiler 更像 TypeScript，或者 JavaScript 引擎中的编译器，比如 V8 或 Hermes，”他说到。“它将我们的代码分解成单独的表达式，并构建一个控制流和数据流图。它执行复杂的优化，如死代码消除、常量传播、类型推断，甚至别名分析等等。”

他补充道：“这些优化通常会出现在 JavaScript 引擎或 Rust 或 C++ 等语言的编译器中。”。他继续说道：“React Compiler 将这些思想应用于 JavaScript，在不牺牲开发者体验的情况下提高了性能。”。他说：“代码不会改变，但在默认情况下，应用程序和更新会更快。”

“事实上，我们的代码变得更加干净和简洁了，因为我们不需要手动记忆化备忘，”Savona 补充道。记忆化备忘技术（Memoization）是一种利用缓存的优化技术。

React Compiler 在代码中的应用

他提到了一个用 React 构建的媒体播放器的早期演示。他说，没有使用备忘录调用，没有随机和不必要的回调函数，但代码中包含了许多开发人员可能不会经常考虑的信息。

“例如，考虑过滤后的歌曲列表，”他说到。“React 显然需要再次过滤歌曲列表并更新播放列表。这段代码还告诉我们相反的情况；如果歌曲没有改变，那么 React 就不应该更新过滤后的歌曲，也不需要更新播放列表”

这正是编译器启用后所发生的事情，他补充道：当歌曲没有变化时，就没有必要更新播放列表。

“我们之所以能够理解这一点，是因为 JavaScript 和 React 有明确的工作规则，我们已经学会了这些规则。”Savona 说到，“我们每天都在阅读代码、编写代码、调试代码以及偶尔测试代码时使用它们。”

编译器可以学习理解那些规则。然后，“它可以’以与我们非常相似的方式‘’看到‘代码，只是它要彻底得多。”他补充道。

他说，它可以将相同的过程应用于代码中的每个值，创建表述一个数据如何在用户界面中移动的计算图。

“编译器知道 React 的规则，它还知道一些额外的东西，”他继续说道。“例如，它知道集合状态函数实际上不会改变，所以编译器不必考虑该值是否可以更新。所以我们可以删除这种依赖边。”

那么，唯一需要更新的就是现在播放的内容，而不是整个播放列表。

“最棒的是，所有这些信息都来自我们今天已经在写的 React 组件和钩子。”他说到。“没有需要学习的 API。没有必要改变我们编写代码的方式。我们可以简单地利用现今代码中已经存在的所有信息。”

他补充道，这些类型的精确 UI 更新有时被称为细粒度响应。

随后，Meta 软件工程师 Mofei Zhang 上台展示了编译器在 Meta 应用程序上的运行情况。在具有大量交互性或组件的页面上，Meta 发现开发者开始进行权衡。

“我们看到的一小部分代码样本很难阅读。”张说到。“这段代码包含了很多手动优化，这有助于让 UI 感觉更敏捷，但也让代码更难理解。”

她展示了一个代码片段，其中有将近 20 个地方是开发人员手工优化的对象。

Meta 在 Instagram 和 Quest 上

尝试使用 React Compiler

在 2023 年，Meta 开始在两个应用程序上使用 React Compiler：Instagram.com 及其 Quest 商店，这是 Meta 的 Quest VR 设备的应用程序商店。她说，编译器优化版本的速度是以前的两倍多。初始加载时间和跨页面导航时间提高了 12%。而且对内存使用率或整体崩溃情况都没有影响，这可以通过内存不足的错误反映出来。导航任务加载速度至少提高了 4%。Instagram 在每条路线上平均提高了 3%。

“在 Meta，这真的是一件大事，”张说到。“为了将这些数字放在上下文中，工程师们梳理了这些应用程序的每一个细节，添加了数千个记忆化备忘调用。”

她补充道，通常情况下，在一个特定的页面上，只要在指标上提高 1 或 2 个百分点，比如第一次绘制，就会是一件大事。

“React Compiler 几乎大大提高了它推出的每个页面的性能。”她说到。“在优化程度较低的应用程序上，我们发现 React Compiler 可以添加超过 15 倍于源代码中已有的记忆量。”

她总结道，使用编译器将使开发人员能够 在尚未手动优化的应用程序上进行快速交互，同时提高已优化应用程序的可读性和可维护性。开发人员甚至可以去掉手工编码的记忆化备忘。

她说：“我们已经看到 React 编译器甚至可以提高应用程序的速度上限，因为它可以比开发人员通过嵌套和条件记忆化存储以及复杂的静态分析进行更多的优化。”。“我们将继续推出更多的应用程序来迭代编译器。”

除了 开源代码 外，React Compiler 还为那些想要探索其工作原理的开发人员提供了 一个游乐场。

最后，Savona 再次上台结束了演讲。

“React Compiler 允许开发人员继续编写与我们的习惯完全相同的代码，”他说到。“事实上，正如我们所看到的，我们可以停止使用手动记忆化备忘……React Compiler 可以为实际应用程序提供显著的性能改进。”

https://thenewstack.io/meta-releases-open-source-react-compiler/

声明：本文为 InfoQ 翻译，未经许可禁止转载。