React 与 Preact：4 小时内为您的项目选择正确的 JavaScript 库

构建现代 Web 应用程序时，选择正确的 JavaScript 库可以在性能、可扩展性和可维护性方面产生巨大影响。

目前，可用的 JavaScript 库非常多，选择正确的库可能会有点困难，错误的选择可能会导致性能问题、增加复杂性并浪费开发时间。

在所有 Javascript 库中 React 更受欢迎且对开发人员更友好。但是等等，还有另一个看起来像 React 的库，它叫做 Preact。又是一个混乱。？

那我们能做什么呢。选择 React 或 Preact ?? ??

因此，在本文中，我们将深入研究 React 和 Preact 之间的差异，探索它们的优点、缺点和用例。最后，您将能够决定哪个库最适合您的项目。

光？，相机？，动作？让我们开始吧。

---

React 和 Preact 简要概述

React 和 Preact 是用于构建用户界面的两个流行的 JavaScript 库。 React 是公认的领导者，而 Preact 作为轻量级替代品而广受欢迎。这两个库有相似之处，但它们的差异会对您的项目产生重大影响。

主要区别是什么

我们将比较 React 和 Preact 的所有领域，包括：

• 尺寸和性能
• API 和兼容性
• 生态系统和社区
• 学习曲线

对你来说还不够吗？让我们穿越时空，回顾一下这两个图书馆的历史。

---

反应的历史

React 由 Facebook 开发，于 2013 年发布。最初用于 Facebook 的 News Feed，后来开源。 React 的主要目标是提供一种高效且可扩展的方式来构建复杂的用户界面。

React 的里程碑

• 2013 年：初始版本
• 2015：React Native 发布（用于移动应用程序开发）
• 2017：React Fiber 发布（重写 React 核心算法）
• 2020：React 17 版本（改进的性能和并发性）

并且仍在不断发展......

Preact 的历史

Preact 由 Jason Miller 创建，并于 2015 年发布。Preact 旨在为 React 提供一个轻量级、兼容且高性能的替代方案。

Preact 的里程碑

• 2015：初始版本
• 2016：Preact 2 版本（改进了与 React 的兼容性）
• 2018：Preact 8 版本（增强性能和调试）
• 2020：Preact 10 版本（进一步性能优化）

无论是否仍在进化。我不知道。因为我是React情人???

---

主要特点

让我们看看这两个库的一些很酷的东西。

功能 反应 准备 标题>

Feature	React	Preact
Initial Release	2013	2015
Size	~30KB	~3KB
Performance	Optimized	Enhanced
Community	Large	Growing
Compatibility	Wide support	Most React libraries
Learning Curve	Moderate	Easy
Ecosystem	Robust	Emerging
License	MIT	MIT

首次发布 2013 2015 尺寸 ~30KB ~3KB 性能 优化 增强 社区 大 成长 兼容性 广泛支持 大多数 React 库 学习曲线 中等 简单 生态系统 稳健 新兴 许可证 麻省理工学院 麻省理工学院 表>

现在我们已经了解了 React 和 Preact 的背景和主要特征，接下来让我们深入了解它们的主要功能并进行比较。

---

主要特点

React 和 Preact 共享许多关键功能，但它们的实现和侧重点存在一些差异。让我们看看。

反应主要特点

• 组件：React 应用程序的构建块
• 虚拟 DOM：高效渲染和更新
• JSX：类似 HTML 代码的语法扩展
• State 和 Props：管理组件数据
• 生命周期方法：组件初始化、更新和销毁的钩子
• Context API：无需 props 在组件之间共享数据
• 钩子：状态和副作用的可重用函数

Preact 主要特点

• 组件：与React类似，但占用空间更小
• 虚拟 DOM：针对性能进行了优化
• JSX：兼容 React 的 JSX 语法
• State 和 Props：与 React 类似，但有一些差异
• 生命周期方法：与 React 类似，但有一些变化
• Compat：React 库的兼容层
• PRPL：以性能为中心的架构

主要区别

• 大小：Preact 的较小大小 (~3KB) 与 React 的 (~30KB)
• 性能：Preact 优化的 Virtual DOM 和 PRPL 架构
• 复杂性：React 更全面的功能集 vs. Preact 的简单性

现在我们已经探索了 React 和 Preact 的主要功能，让我们比较一下它们的生态系统和社区。

---

生态系统和社区

强大的生态系统和活跃的社区对于 JavaScript 库的成功至关重要。但根据我的研究，我得到的东西很少，请原谅我。

反应生态系统

• 大型社区：超过100万开发者
• 广泛采用：被 Facebook、Instagram、Netflix 等使用
• 丰富的库：Redux、React Router、Material-UI 等等
• 工具和集成：Webpack、Babel、ESLint 等
• 文档和资源：官方文档、教程和博客

Preact生态系统

• 不断壮大的社区：数千名开发者
• 新兴采用：由 Google、Microsoft 和 Mozilla 等公司使用
• 兼容层：支持大多数React库
• 轻量级替代方案：Preact-Router、Preact-Material 等
• 文档和资源：官方文档、教程和社区支持

根据我个人的研究，Preact 发展得非常好，看起来有一天，Preact 超越了 React。

社区参与

• Reactiflux（React 社区）：10 万+ 会员
• Preact Discord：超过 5,000 名会员
• Stack Overflow：React（234k 问题）、Preact（1.5k 问题）

让我们比较一下他们的性能和基准。

---

性能和基准

性能是任何 JavaScript 库的一个关键方面。但谁在乎呢？ ？

反应性能

• 虚拟 DOM：优化渲染和更新
• 批量更新：减少 DOM 突变的数量
• ShouldComponentUpdate：优化组件重新渲染
• React Fiber：提高渲染性能

预反应性能

• 优化的虚拟 DOM：更快的渲染和更新
• 简化的组件模型：减少开销
• PRPL 架构：以性能为中心的设计
• 小尺寸：压缩后约3KB

基准测试

基准 反应 准备 标题>

Benchmark	React	Preact
Render Time	100-200ms	20-50ms
Update Time	50-100ms	10-30ms
Memory Usage	5-10MB	1-3MB
Page Load Time	1-2s	0.5-1s

渲染时间 100-200ms 20-50ms 更新时间 50-100ms 10-30ms 内存使用情况 5-10MB 1-3MB 页面加载时间 1-2秒 0.5-1s 表>

性能优化支持

我们都知道这篇文章是关于库性能的，没关系，我们是否了解这种技术？‍♂️。所以，不要惊慌。因为世界上一半的人不知道，而我们就是其中之一。

Technique	React	Preact
Code Splitting	✅	✅
Tree Shaking	✅	✅
Lazy Loading	✅	✅
Caching	✅	❌

但是，我有一个令人惊讶的消息要告诉你。

• Facebook：将 React 用于性能关键型应用程序
• Google：将 Preact 用于一些面向性能的应用程序

我们谈论了很多关于功能、性能、优化和更多令人难以置信的事情。 其实我也不知道？因此，让我们看看每个库的用例，而不是在代码上撒奶酪。

---

使用案例

React 和 Preact 都适用于各种应用，但它们的差异使它们更适合特定的用例。

反应用例

• 复杂的企业应用程序：具有多种集成的大规模、复杂的应用程序。
• 高流量网站：需要优化性能的高流量网站。
• 实时应用程序：需要实时更新的应用程序，例如实时分析。
• 移动应用：用于跨平台移动应用开发的 React Native。

Preact 用例

• 中小型应用程序：简单、快速且轻量级的应用程序。
• 渐进式 Web 应用程序：快速、支持离线的 Web 应用程序。
• 实时更新：需要快速、高效更新的应用程序。
• 服务器端渲染：快速、轻量级的 SSR 解决方案。

React 和 Preact 应该选择什么？

• 考虑复杂性：React 适合复杂，Preact 适合简单。
• 评估性能：为快速、轻量级做好准备。
• 评估可扩展性：React 适合大规模，Preact 适合中小型。
• 回顾生态系统：React 用于扩展库，Preact 用于兼容性。

明白吗？没关系，不要尝试！！ ？

最后.... 我可以写更多，但是，我是个懒人，我会分享第2部分。

---

结论

React 和 Preact 都是用于构建用户界面的强大 JavaScript 库。 React 在可扩展性、生态系统和企业应用程序方面表现出色，而 Preact 在性能、简单性和中小型应用程序方面表现出色。

最后，这取决于开发者和他们的观点。我写了很多关于这个库的文章（所谓的营销）我得到了什么？ 点赞、分享、订阅和尊重（有时）。 ??

我想告诉你，你找不到这样的比较。这种类型的比较需要大量的时间和精力和时间就是金钱。我寻找的只是为了支持。另外，如果您时间不多并且确实想看一些东西，请访问 TechAlgoSpotlight.com。我为 Medium 写了这篇文章，但是我喜欢 DEV ???

---

以上是React 与 Preact：4 小时内为您的项目选择正确的 JavaScript 库的详细内容。更多信息请关注PHP中文网其他相关文章！