为降低迁移风险，Etsy 从 React 转向了 Preact

| 2022-02-09

图1: undefined为降低迁移风险，Etsy 从 React 转向了 Preact

近日，高级软件工程师 Ben Sangster 宣布 Etsy 已从 React v15.6 迁移到了 Preact 10 。Preact 是 MIT 许可下的开源软件，比 React 小得多，性能也比 React 快，Sangster 认为采用 Preact 能降低迁移大型代码库产生的风险。

图0: undefined为降低迁移风险，Etsy 从 React 转向了 Preact

我们用 Preact 替换掉了全部的 React v15.6 。这是一个巨大的胜利。与迁移到 v16 相比，迁移到 Preact 要容易得多（对旧代码的重写或重构要少得多）。

Sangster 表示迁移是无缝的，React v15.6 和 Preact 可以使用完全相同的 client，对于 Etsy 的开发人员来说，真正重要的改进是他们可以开始编写更现代的 React。

在相关博客文章中，Sangster 详细解释了 Etsy 迁移到 Preact 而不是最新版 React 的三个原因。

首先，采用 Preact 能最大程度地降低迁移风险。开发人员一般都比较喜欢React 16 的新特性（例如，error boundaries、fragments、错误堆栈跟踪、自定义 DOM 属性、React 16.8 中的 hooks），虽然 React 16.0 文档提到了一些小的重大更改，但也有不少开发人员报告了迁移的痛苦。Discord 的 Michael Greer 说：“并不是所有的 package error 都那么容易被发现，这才是真正的痛苦所在。我们遇到了一个错误，花了 2 天时间才找到对应的 library，你可能也会遇到同样的问题。”另外，routing library 是许多 Web 应用程序的关键依赖项，也可能会导致迁移出错。

Sangster 解释说，总体而言，Preact 能更好地控制迁移风险：

Preact 的 API 与 React 兼容，这意味着我们不用进行任何更改。
由于 Preact 强调与 React v15 和 React v16 的兼容性，迁移到 Preact v10.4.2 将变得更加容易。
从开发人员工具的角度来看，采用 Preact 似乎没有任何重大障碍。

其次，Etsy 的前端系统团队已经在使用 Preact。在 Etsy 中统一使用 Preact 可能会使开发人员的生活更轻松。

再次，Preact 的包大小（Preact v10.4.5 为 4KB）比 React 的小六倍（React v16.13.1 添加react和 react-dom 之后为 38.5KB）。JavaScript 体量越大，延迟 (time to interactive),也就越大，消耗的内存和 CPU 也会越大。

Sangster 强调说：“我们有很多古老的‘无主’代码和很多旧的库，升级到 React 16 会导致一些 API 问题（尤其是 Portals/legacy Context/refs），需要做大量的工作才能够解决。相反，我们迁移到 Preact，可以将代码重构为可用的、最现代的东西，而不需要去做同步升级组件/库这些事情。”

本文文字及图片出自 InfoQ