使用 JSX 构建应用程序比 React 和 Preact 更快

在撰写本文时， React 是最占主导地位的前端 Web 框架，但是，它并非没有问题，例如，膨胀的包大小会降低应用程序的性能。

尽管已经进行了许多尝试以尽量减少这些因素，但新的创新寻求改进已经取得的进展。在本文中，我们将探索Million，一个轻量级的虚拟 DOM。我们还将比较 Million 与 React 和 Preact 的性能和功能。让我们开始吧！

• React 的常见问题

• 使用 Preact 加快速度

• 编译：Svelte、SolidJS 和 Million 的下一代

  • 苗条

  • 坚硬的

  • 百万

• 创建基本计数器

React 的常见问题

React 引入了一些有用的创新，例如，一种类似于 HTML 的语法，用于表达被转换为React.createElement调用的声明性 UI。React 还为我们提供了优化 DOM 更新的能力。通过创建用于跟踪实际 DOM 差异的 DOM 树的虚拟版本，我们可以将更新限制为仅实际更改的内容。

但是，React 的一个问题是您必须将 React 库与每个 React 应用程序一起提供。这样做会增加包的大小，这会降低第一次绘制或 Web 应用程序初始加载的速度。

在撰写本文时，React 的版本为 18.2，它由两个库组成：React，压缩后为 10.7kb，以及react-dom，压缩后为 131.9.kb。这对于发布浏览器来说可能很多，而且它甚至不包括 Web 应用程序本身的实际代码。

另一个问题是虚拟 DOM，它可能是处理密集型的。虽然虚拟 DOM 可以加快开发良好的应用程序的渲染速度，但它也可以在不使用最佳实践或使虚拟 DOM 有效优化的开发不佳的应用程序上增加大量处理工作负载。

使用 Preact 加快速度

虽然许多开发人员喜欢使用 React 的开发人员体验和生产力，但减轻大包大小和虚拟 DOM 工作负载是一个关键优先事项。

解决这些问题的最初尝试之一是 Preact。Preact创建了一个利用 Web 标准的虚拟 DOM 实现，因此需要交付的代码更少。结果实现了 3kb 的库大小，比 React 小得多，更快的虚拟 DOM，以及通过使用 HTM 标记的模板文字而不是 JSX 来避免转译的能力。

Preact在那些关心 React 的 bundle 大小和虚拟 DOM 处理的人中越来越受欢迎。事实上，它是Fresh的原生模板库，是 Deno 运行时的新全栈 Web 框架。

编译：具有 Svelte、Solid 和 Million 的下一代

另一项开发旨在通过完全消除将框架运送到浏览器的需要来进一步降低捆绑包的大小和速度。这项创新包括 Svelte、Solid 和 Million 等流行工具，所有这些工具都因其速度而越来越受欢迎。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

苗条

Svelte 由 Rich Harris 创建，采用传统的 Web 模式和标准。Svelte 应用程序被编译为 Web 标准代码，因此无需将框架交付给最终用户。Rich Harris 最近被 Vercel 聘为全职开发 Svelte及其 SvelteKit 框架。

坚硬的

Solid由 Ryan Carniato 创建，受到 Knockout 等框架的启发，但使用 JSX 带来了非常熟悉的 React 风格。

诸如 Svelte 之类的实体应用程序经过编译，并且仅将应用程序代码发送给最终用户。Solid 的反应性模型与 React 完全不同，因此即使您使用 JSX 语法，某些模式的表现也完全不同。

您无需在每次更新时重新运行组件函数，而是将代码的一部分指定为在更新依赖项时重新评估的效果。Netlify 聘请 Ryan Carniato 全职从事 Solid 工作。

百万

与 Solid 类似，Million 允许您使用 JSX 语法并编译您的代码，因此您向浏览器发送的内容要少得多。

Million 有一个苗条的虚拟 DOM 实现，如 Preact，以维护一个与 React 更相同的 API。与 Preact 的 3kb 虚拟 DOM 实现相比，Million 交付时不到 1kb。

Million的API是开源的，任何人都可以在它之上构建。从理论上讲，如果我想创建一个编译器来编译 Vue 组件以使用 Million 虚拟 DOM，我可以。

Million 允许在其当前版本中提供更快的类似 React 的体验，但为开发人员打开了构建新框架或在其纤巧快速的虚拟 DOM 方法之上扩展现有框架的大门。让我们通过构建一个快速的应用程序来看看它的工作情况。

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

• 发现TypeScript 领域中使用的流行 ORM

---

Antdownload百度网盘不限速下载，无需注册登录，73.93MB/s 极速下载！

设置您的百万应用程序

前往这个百万模板并单击使用模板在您的 GitHub 帐户中创建您自己的模板副本。

通过运行克隆到您的计算机git clone <github repo url>。然后，cd进入新创建的文件夹并运行npm install以安装所需的依赖项。最后，运行npm run dev运行开发服务器。

当您转到 时localhost:3000，您应该看到以下内容：

我们现在都准备好开始开发这个 Million 应用程序了，它应该与使用 React 并没有什么不同。

创建基本计数器

转到您的src/App.jsx文件并用下面的代码替换内容，这应该会清除屏幕：

从“反应”导入 { useState }；
导入'./App.css'；
函数应用程序（）{
  // 计数器的状态
  const [count, setCount] = useState(0);
  返回 （
    <div className="App">
    </div>
  );
}
导出默认应用程序；

现在，让我们构建我们的传统计数器，就像我们在任何早期的 React 教程中所做的那样：

从“反应”导入 { useState }；
导入'./App.css'；
函数应用程序（）{
  // 计数器的状态
  const [count, setCount] = useState(0);
  // 增加计数器的函数
  函数添加计数（）{
    setCount((当前) => 当前 + 1)
  }
  返回 （
    <div className="App">
      <h1>{计数}</h1>
      <button onClick={addCount}>添加一个</button>
    </div>
  );
}
导出默认应用程序；

您现在应该在屏幕上看到以下内容：

就是这样，您无需对 React 中的应用程序开发进行任何更改即可在 Million 中进行开发，但您将受益于 Million 用于精简包大小的更快的虚拟 DOM 实现和编译。

结论

Million 和 Preact 一样，解决了大型 React 包和重量级虚拟 DOM 的问题，但增加了编译以进一步提高速度和减少包。

使用 Million，我们可以享受以熟悉的 React 方式开发应用程序的乐趣，而无需进行任何重大更改。但是，请记住，一些较新的功能可能不会立即可用。前端框架空间仍然是 Web 开发空间中许多创新的中心，很高兴看到这个项目会产生什么。

全面了解生产 React 应用程序

调试 React 应用程序可能很困难，尤其是当用户遇到难以重现的问题时。如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket。

LogRocket就像一个用于 Web 和移动应用程序的 DVR，几乎可以记录您的 React 应用程序上发生的所有事情。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。LogRocket 还监控您的应用程序的性能，并使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。LogRocket 记录来自 Redux 存储的所有操作和状态。