跳到主要内容

简介

React Strict DOM 允许使用 Web API 来构建 Web 和原生平台的界面。

开发中

React Strict DOM 正在开发中。并非所有功能都已在原生平台上可用。 有关原生平台上 API 兼容性的详细分类，请参阅 API 参考。

什么是 React Strict DOM？​

React Strict DOM (RSD) 是 Meta 使用的 JavaScript 库，用于在 React Native 上渲染 React Web 界面。

React Strict DOM 定义了 React DOM 和 Web API 的一个子集，可用于在 Web 和原生平台上渲染组件，并具有宿主平台的外观和感觉。 开发人员可以重用他们现有的 React Web 开发知识来构建原生应用程序。 而且他们可以重用大量现有的 React DOM 代码，以降低开发成本和上市时间来接触原生平台。

跨平台 React，但 Web 优先​

您已经了解的关于使用 React 的所有知识仍然适用于 React Strict DOM。 您已经了解的关于使用 React DOM 和 Web 的大部分知识也适用于使用 React Strict DOM。 通过将 HTML、CSS 和 DOM API 限制为 Web 上可用的特定子集，您可以创建不仅可以在原生平台上运行，而且还可以更轻松地与 React 的编程模型保持一致的应用程序。

严格的 HTML 元素​

React Strict DOM 比 React DOM 更严格。 每个组件都暴露在 html 导出上，更严格的元素不支持已弃用或旧版 Web 属性。 了解有关 HTML API 的更多信息。

import { html } from 'react-strict-dom';

function MyButton() {
  const onClick = (e) => {};

  return (
    <html.button onClick={onClick}>
      A cross-platform button
    </html.button>
  );
}

严格的 CSS 样式​

React Strict DOM 包含一种内置的、必需的在 JavaScript 中编写样式的方式。 然后可以将这些样式传递给 html.* 元素的 style 属性。 在 Web 上，这些样式被提取到优化的原子 CSS。 了解有关 CSS API 的更多信息。

import { css, html } from 'react-strict-dom';

const styles = css.create({
  button: {
    backgroundColor: {
      default: 'white',
      ':hover': 'lightgray'
    },
    padding: 10
  }
});

function MyButton() {
  return (
    <html.button style={styles.button}>
      A cross-platform button
    </html.button>
  );
}

使用命令式 DOM 和 Web API​

借助 React Native 提供的全新功能，React Strict DOM 支持在原生平台上使用各种 DOM 和 Web API。 了解有关 Web API 的更多信息。

function MyButton() {
  const elementCallback = (node) => {
    const parent = node.parentElement;
    // ...
  };

  return (
    <html.button ref={elementCallback}>
      A cross-platform button
    </html.button>
  );
}

为什么使用 React Strict DOM？​

更好的 Web 应用程序​

React Strict DOM 提供了一个优化的解决方案，用于在 Web 上描述具有封装样式的组件，运行时代码少于 2 Kb。 它是 Meta 成功开发 Facebook、Instagram、Threads 和 Meta.ai 等 Web 应用程序界面的语法糖。 并且它具有为开发人员提供类型安全组件的优势，可以防止使用旧版 Web 属性。

更好的原生应用程序​

React Strict DOM 允许开发人员使用跨平台完全相同的 API 来定位 Android 和 iOS。 它还添加了 React Native 尚未提供的声明性功能，例如 CSS 伪状态和相对单位。

工程效率​

使用 React Strict DOM 构建的界面组件更具可移植性。 无论应用程序的原始目标平台是什么，它们都可以选择在 Web 或原生平台上运行。

减少开发人员的再培训​

熟悉 Web 的开发人员可以直接将该知识应用于原生应用程序开发，而无需学习如何将 Web 模式转换为 React Native 模式。