如何让Airbnb平稳升级React

Airbnb’s frontend recently reached a major milestone: all of our web surfaces have been upgraded from React 16 to React 18, the current major version of React¹. This was a big project for a product with many surfaces, including Guest and Host pages as well as many internal tools. To safely perform this upgrade, we created the React Upgrade System: reusable infrastructure that allows us to roll out new versions of React progressively across our monorepo and measure the results of the upgrade. In this blog post, we’ll discuss our upgrade philosophy, the system we created, and what we learned from performing this upgrade.

Airbnb的前端最近达到了一个重要的里程碑：我们所有的Web界面都已经从React 16升级到React 18，这是React的当前主要版本。对于一个有许多界面的产品来说，这是一个大项目，包括Guest和Host页面以及许多内部工具。为了安全地执行这个升级，我们创建了React升级系统：可重用的基础设施，允许我们逐步在我们的monorepo中推出新版本的React，并测量升级的结果。在本博客文章中，我们将讨论我们的升级理念、我们创建的系统以及我们从执行这个升级中学到的东西。

While this post primarily focuses on React, the system and lessons are applicable to many web frameworks and libraries that require regular upgrades.

虽然本文主要关注 React，但这个系统和经验也适用于许多需要定期升级的 Web 框架和库。

Challenges of upgrading

升级的挑战

Upgrading dependencies is a common task in any long-lived project. Upgrades fix bugs, improve performance, and unlock new APIs. Some upgrades are simple, but upgrades become more difficult when large amounts of product code rely on changed APIs or subtle assumptions about behavior. In Airbnb’s web monorepo, we only allow one version of each top-level dependency (with some rare exceptions), with one package.json at the root of the repo. This ensures that code within the monorepo is internally compatible and consistent, and that we avoid shipping duplicate packages to users. Before the upgrade system, having a single version of each dependency meant performing an atomic update, which requires a huge amount of up-front migration work, a long-running upgrade branch, and a single milestone when it is finally deployed to users. Such an approach is error-prone and risky, thus requiring a “heroic” engineering effort to ship clean upgrades.

升级依赖是任何...