• Meta开源了react-strict-dom库
  • 发布于 2个月前
  • 89 热度
    0 评论
  • 小熊
  • 0 粉丝 30 篇博客
  •   
最近,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>你好, 堆代码!</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 组件:

但是,这种方式也有相当多的缺点:
1.实现了大片分散的 API,需要匹配 React Native 的非标准实现(例如事件)。

2.库本身也相当大,这对现代 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>
  );
}
// 堆代码 duidaima.com
// 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
用户评论