什么是 React 编译器？

React 编译器是一个新的实验性编译器，它有望彻底改变 React 应用程序性能优化的方式。

您可以通过这个免费的 Medium 链接阅读和收听播客格式的这篇文章。

什么是编译器？

简而言之，编译器是将一种编程语言（源语言）翻译成另一种编程语言（目标语言）的程序。

编译器将源语言翻译成目标语言

例如，JSX 和 TSX 被编译成 JavaScript（使用 Babel 或其他）以便浏览器理解代码。

为什么要使用新的 React 编译器？

我听说的主要原因之一是性能优化。

有时，React 应用程序会遭受不必要的重新渲染，从而导致性能问题。
开发人员可以使用记忆、回调等方式优化代码。但这通常会转化为充满记忆调用的混乱组件。

React 编译器解决方案是什么？

简单来说，React Compiler 应该自动优化你的代码，减少手动性能优化的需要。

因此，React Compiler 应该提高应用程序的响应能力。

让我们深入探讨一下。

什么是 React 编译器？

React 编译器是 React 18 中已经提供的实验性编译器。即使在 React 19 中，它也很可能是一个可选工具。

在 React 18 中使用 React Compiler 需要一些手动配置，但您已经可以尝试了。

React 编译器设计为在 React 19 生态系统中工作

安装 React 编译器

虽然 React Compiler 在 Instagram 的生产中使用，但它作为测试版开源，并可在 React 17 上使用。

编译器附带了强烈推荐的 eslint 插件，可以在编辑器中显示编译器分析。

即使您没有使用 React Compiler，也可以使用 eslint 插件。

React 编译器健康检查

在安装 React Compiler 之前，建议检查兼容性。

运行以下命令：

npx react-compiler-healthcheck@beta

得到如下结果：

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

编译组件的数量较多是一件好事。这是可以成功优化的组件数量。

我的 StrictMode 未启用，但启用并遵循此模式意味着遵循 React 规则的机会更高。
所以我们应该保持它启用。

最后，react-compiler-healthcheck 检查与编译器不兼容的已知库。我没有，但 MobX 会给你带来问题。不行的。

安装 React 编译器

使用 npm 安装 React 编译器：

npx react-compiler-healthcheck@beta

或者，如果您使用的是 Yarn：

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

您还应该将 eslint 插件添加到配置中。就我而言，它是一个 .eslintrc.js 文件。

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

正确设置 eslint 插件后，您可能会收到一些有关 React 规则的警告。您可以当场或稍后更新。

唯一的区别是在第二种情况下，React 跳过了对该组件或钩子的优化。

您可以通过这个免费的 Medium 链接阅读和收听播客格式的这篇文章。

以上是什么是 React 编译器？的详细内容。更多信息请关注PHP中文网其他相关文章！