跳到主要内容

设计目标

来自 CSS、DOM 和 HTML 现有 Web 标准子集的跨平台用户界面 API。

动机​

React Strict DOM (RSD) 最初是为了原型设计和推动“用于原生的 React DOM”的开发。 它使工程师能够快速轻松地在原生平台上重用现有的 React Web 代码和知识。 我们的目标是快速轻松地重用 React Web 代码，以生成高质量的原生界面，缩短产品上市时间，并提高工程效率和产品质量。

React Strict DOM 旨在利用我们多年来对 React 的许多框架投资（例如，React Native Fabric, React Compiler, React 开发者工具, Yoga 等等），这些现在使得大幅改进跨平台产品开发成为可能。

用户体验​

React Strict DOM 旨在保留 Web 应用程序的可访问、丰富的用户体验，并在需要时将其提供给原生应用程序。 在 Web 上，React Strict DOM 提供了一个集成的、严格的样式解决方案，可以优化生成的样式并防止其他方法典型的样式冲突。 通过将更多声明式 prop 和样式 API 从 Web 引入到原生平台，它有助于提供丰富的、多模态的体验，否则很难直接使用 React Native 实现。

平台原生​

React Strict DOM 在每个平台上渲染原生 UI 元素。 使用与 Web 兼容的 API 并不意味着牺牲 Android 或 iOS 上的平台原生期望。 W3C API 被转换为原生等效项，并尝试保留宿主平台的预期特征。 采用 W3C API 允许 React Native 应用程序合并声明式样式、同步 API 和定义良好的调度，从而可以提高原生应用程序的性能。

高性能​

相对于 Meta 现有的 React Web 代码（使用 React DOM 和 StyleX 编写），Web 上的 React Strict DOM 没有捆绑包大小或运行时性能开销。 这是一个基本约束，有助于在 Web 标准上整合跨平台 API。 在原生平台上，React Native 的运行时 polyfill 经过优化，以避免成为瓶颈，并且随着功能转移到原生代码中，将会继续变得更快。

可访问性​

使用 React Strict DOM 构建的应用程序可以利用 Web 固有的可访问性和模态 API。 这意味着用户可以期望能够使用鼠标、键盘、指针和屏幕阅读器在任何平台上与应用程序交互。

开发者体验​

React Strict DOM 旨在使开发者能够使用基于 Web 和 React DOM 的单个跨平台 API 来定位多个平台。 通过与 Web 标准保持一致，功能得到统一。 这简化了代码共享、静态类型、开发者教育和调试。

定义良好的 API​

React Strict DOM 为实现提供了一个定义明确的目标 API。 通过与现有 Web 规范保持一致，我们可以绕过在 React Native 中设计定制、高质量跨平台 API 的缓慢而困难的工作。 相反，贡献者可以直接进入实施阶段，从而使我们能够更快地统一跨平台的 React UI 开发。

统一的元素和样式​

标准化 HTML 元素和 CSS 样式使 Web 工程师可以重用他们现有的 React DOM 和 StyleX 知识来定位 Web 以外的平台。 React Strict DOM 解决了某些 React Native API 基于 W3C API 但不符合标准的问题，以及其他一些 API（在 Web 上是声明式的）在 Web 上存在固有的性能缺陷。

统一的类型​

React Strict DOM 允许开发者在使用宿主元素时使用现有的 DOM 类型（例如，HTMLElement），并为 React 组件和样式提供统一的类型。 这意味着使用 Flow 和 TypeScript 键入的现有 Web 代码几乎不需要修改即可在原生平台上工作。

方法​

React Strict DOM 能够通过以下方式为 React 开发者提供统一的跨平台 API：1) polyfill 大量标准 API，2) 利用 React Native 的新功能，例如 DOM 遍历 API 和定义良好的事件循环处理模型。 在可能的情况下，功能内置于原生代码中。 React Strict DOM 封装了大量 polyfill 和 shim，可将 React DOM API 转换为 React Native 等效项。 我们优先考虑 JavaScript 中的用户空间 shim，因为它们可以更快地发布，并允许我们收集反馈并推动采用。

我们探索的其他方法要么基于 React Native 的 API（例如，React Native for Web），要么基于另一个自定义 API。 但它们在 Web 上引入了性能下降、所有平台的实施和迁移复杂性，以及与开发非标准 API 相关的持续设计成本。

权衡​

以与 Web 的原生兼容性为目标会将开发新功能的负担转移到 React Native 上。 尽管原生平台上运行时 polyfill 的开销是可以接受的，但它并非微不足道。 某些跨平台限制源于宿主平台 API 的重大差异。 开发者可能不习惯于在 Web 上完整但在原生平台上部分实现的 API。

结果​

Meta 已经能够自动将大量的现有 React DOM + StyleX Web 代码 codemod 到 React Strict DOM 上，而无需在 Web 上进行重大修改或损失功能。 通过使用 React Strict DOM，Web 组件库现在构成了在 VR 上的 Facebook 和 Instagram 体验的一致、高质量的基础。