Meta 最新开源！面向 Web 和 Native 的跨平台 React 解决方案

最近，Meta 开源了一个新的库，叫做 react-strict-dom，其目标是改进和标准化编写用于 Web 和 Native 的通用 React 组件的方式。

在 React Native 中，用于渲染 UI 的原始组件和 Web 不同，如果你是一个 Web 开发者，看到基础的 React Native 组件一开始可能会觉得有点奇怪，也难以使用：

import { View, Text } from "react-native";
 
const App = () => {
  return (
    <View>
      <Text>你好, code秘密花园!</Text>
    </View>
  );
};

此外，它还移除了在 React Native 中使用使用 Web 原生的 UI 库的能力，从 Web 迁移组件需要花费很多时间，并且非常痛苦。

react-native-web

几年前，在 Twitter 的 Progressive Web 应用的开发过程中，尼古拉斯·加拉格尔（Nicolas Gallagher）创造了 React Native for Web。RNW 添加了一个兼容改进，将 Ract Native 的代码转译为 react-dom 的代码，使我们能够在 Web 上渲染 React Native 组件：

但是，这种方式也有相当多的缺点：

• 实现了大片分散的 API，需要匹配 React Native 的非标准实现（例如事件）。
• 库本身也相当大，这对现代 Web 应用来说并不是最好的选择。

react-strict-dom 的方法是什么？

react-strict-dom 采取了与 React Native for Web 相反的方法，它使用 Web API 来渲染组件。为此，它添加了两个小型的 polyfill ，负责将其 API 转译成 react-native 和 react-dom 代码。下面的架构图详细展示了它是如何工作的：

目前，并不是所有的 API 都在 Native 平台内部内置，但是开发者们也正在努力兼容中。

这个表格展示了当前的兼容性的进度：https://github.com/facebook/react-strict-dom/blob/main/packages/react-strict-dom/COMPATIBILITY.md

使用 react-strict-dom 创建组件

react-strict-dom 是由 Meta 创建的新样式解决方案，由 stylex 提供支持，它已经在 facebook.com 的生产环境中开始使用了。我们可以用来构建应用的所有模块都可以在 html 下找到，以下是使用 RSD 构建 UI 的一个例子：

import React from "react";
import { css, html } from "react-strict-dom";
 
// Part of apps/examples/src/App.js
export default function App() {
  return (
    <html.div style={styles.div}>
      <html.div data-testid="testid">div</html.div>
      <html.span>span</html.span>
      <html.p>paragraph</html.p>
 
      <html.div />
 
      <html.span>
        <html.a href="https://google.com">anchor</html.a>,
        <html.code>code</html.code>,<html.em>em</html.em>,
        <html.strong>strong</html.strong>,
        <html.span>
          H<html.sub>2</html.sub>0
        </html.span>
        ,<html.span>
          E=mc<html.sup>2</html.sup>
        </html.span>
      </html.span>
    </html.div>
  );
}
 
// This is calling `stylex` under the hood
const styles = css.create({
  div: {
    paddingBottom: 50,
    paddingTop: 50,
    backgroundColor: "white",
  },
});

react-strict-dom 利用我们熟知的 Web API 来构建 Web 和 Native 通用的应用程序。

<html.div> 是一个原生组件吗？

是的，它是！ react-strict-dom 的角色是将一个通用 API 转译成各个平台的原始代码。

在 React Native Principles 博客文章中写到：

我们对 React Native 的最高优先级是符合人们对每个平台的期望。这就是为什么 React Native 会渲染成平台原生代码。我们重视原生的外观和感觉，而不是跨平台的一致性。

React Native 的目标是创建完全的原生应用，所以，使用新的方法，我们最终还是能创建一个完全的原生应用，而不是 WebView 或其他任何东西。我们可以通过在存储库中运行示例应用并使用 Xcode 的视图层次工具来检查组件，轻松验证这一点：

Nicolas 的 RFC：RFC: React DOM for Native （https://github.com/react-native-community/discussions-and-proposals/pull/496） 详细介绍了方案的原理，感兴趣可以深入阅读一下。

react-strict-dom 正在帮助 Meta 的团队更快地实现功能，使用更少的工程师，发布到更多平台，这也是 Meta 直接发起的第一个面向 Web 和 Native 的跨平台 React 解决方案！

对此，你怎么看？

最后

参考：

• https://github.com/facebook/react-strict-dom/
• https://szymonrybczak.dev/blog/react-strict-dom#what-is-react-strict-dom-approach
• https://github.com/react-native-community/discussions-and-proposals/pull/496