最近，Meta 開源了一個項目：React Strict DOM，在一周的時間新增了超過 2200 Star。其官方介紹如下：

React Strict DOM（RSD）是 React DOM 和 StyleX 的實驗性集成，旨在改進和標準化 Web 和原生平臺的 React 組件的開發。RSD 的目標是提高React開發的速度和效率，同時不犧牲性能、可靠性或質量。使用 RSD 進行構建有助于 Meta 的團隊更快地向更多平臺發布功能，同時減少工程師的數量。

這么說可能有點抽象，下面就來了解一下這個庫出現的背景以及解決了什么問題。

背景

React DOM對于創建網站非常有用，因為它讓開發者能夠使用React。它作為一種工具，提供了DOM特定的方法，這些方法可以在Web應用的頂層使用，從而實現在 React 應用中高效地管理DOM元素。然而，當開發者希望將Web應用的出色功能和無縫體驗擴展到移動設備時，會遇到一些挑戰。問題在于，React DOM 并不天然地適應原生環境。因此，開發者通常需要為移動設備創建一個使用 React Native 的應用版本，這是專為移動平臺設計的。

這種做法實際上增加了開發者的工作量。他們不僅需要學習和管理兩個不同的系統（React DOM用于Web，React Native用于移動端），還需確保兩個版本的應用都能良好運行，并為用戶提供一致的體驗，無論用戶使用的是哪種設備。在某些情況下，這一過程可能變得耗時、復雜且易于出錯，從而增加了跨平臺維護和更新應用的難度。

當使用 React Native 開發 Web 應用時，現有的解決方案是借助 React Native for Web。React Native for Web 是一個基于 React DOM 和原生 DOM API 的用戶空間庫，它在 Web 上模擬了 React Native 的組件和API。對于現有的React DOM應用，工具會將 'react-native' 的導出簡單地映射到 'react-native-web'，但它給人的感覺就像是將一個平臺硬塞進另一個平臺。

目標

想象一下，如果你只需編寫一次應用，它就能在各種平臺上無縫運行，這將是一個多么好的愿景。這正是 React Strict DOM（簡稱RSD）所努力實現的目標。

在 React 領域，我們通常需要為網站使用 React DOM，而為原生平臺（如 iOS、Android、MacOS、Windows、TVOs、VisionOs、Skia 等）則使用 React Native。這種區分增加了開發的復雜性，有時甚至帶來挑戰。RSD 作為一種解決方案，旨在簡化這一流程，讓我們能夠更輕松地構建應用，而無需擔心目標平臺。

RSD 致力于消除跨平臺開發的障礙，使開發者能夠專注于創造出色的用戶體驗，而不是處理與平臺相關的繁瑣細節。它有望成為 React 開發者的得力助手，助力實現跨平臺開發的效率和便利。

注意：目前 React Strict DOM 仍處于試驗階段，尚未達到在生產中使用的條件。不過，Meta 已經在實際生產中開始使用 React Strict DOM 了。

實現

React Strict DOM 的核心理念在于不僅減輕開發者的負擔，而且致力于提高React應用跨平臺的一致性和可靠性。通過統一組件和API的行為標準，RSD確保應用程序無論運行在哪個平臺上，其行為都是可預測和一致的。這與當前情況相比是一個顯著的進步，因為 React DOM 和 React Native 之間的差異可能會引發跨平臺應用中的錯誤和不一致。

此外，RSD與Meta的CSS-in-JS庫StyleX緊密集成，為開發者提供了一個統一的、跨平臺的樣式解決方案。這種集成允許開發者使用熟悉的CSS類語法為應用程序設置樣式，同時享受StyleX提供的卓越性能和安全性。

React Strict DOM 的前提是存在一個通用的DOM庫，可以支持Web、iOS、Android（以及未來可能支持更多平臺）。元素 API 基于Web，因為它的語法非常類似于 HTML：

import { css, html } from 'react-strict-dom';
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Failed prop type'])

const styles = css.create({
  container: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1
  },
  h1: { padding: 10 },
  button: {
    borderRadius: 20,
    backgroundColor: '#700fad',
    padding: 10,
    paddingLeft: 50,
    paddingRight: 50
  },
  buttonText: { 
    color: 'white',
    position: 'relative',
    fontWeight: 'bold'
  }
});

export default function App() {
  return (
    <html.div style={styles.container}>
      <html.h1 style={styles.h1}>Hello World</html.h1>
      <html.button
        style={styles.button}
        onClick={() => alert('Hello World')}
      >
        <html.p
          style={styles.buttonText}
        >
          Click me
        </html.p>
      </html.button>
    </html.div>
  );
}

React Strict DOM 包含的標簽如下：

const elements = {
  article: View,
  aside: View,
  blockquote: Text,
  br: Text,
  button: Pressable,
  code: Text,
  div: View,
  em: Text,
  fieldset: View,
  footer: View,
  form: View,
  header: View,
  h1: Text,
  h2: Text,
  h3: Text,
  h4: Text,
  h5: Text,
  h6: Text,
  img: Image,
  input: TextInput,
  main: View,
  nav: View,
  ol: View,
  p: Text,
  pre: Text,
  section: View,
  strong: Text,
  sub: Text,
  sup: Text,
  textarea: TextInput,
  ul: View
};

小結

React Strict DOM 作為一種實驗性但前景光明的解決方案，致力于簡化跨平臺 React 應用的開發過程，可能會極大地改變我們未來對通用應用開發的理解。通過解決與React DOM相關的根本問題，并利用統一開發方法的優勢，RSD有望顯著提升開發者的生產力，并確保應用具備更高的一致性，期待 React Strict DOM 未來的表現！