React 跨平台开发指日可待!

开发 前端
React Strict DOM(RSD)是 React DOM 和 StyleX 的实验性集成,旨在改进和标准化 Web 和原生平台的 React 组件的开发。RSD 的目标是提高React开发的速度和效率,同时不牺牲性能、可靠性或质量。使用 RSD 进行构建有助于 Meta 的团队更快地向更多平台发布功能,同时减少工程师的数量。

最近,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 未来的表现!

责任编辑:姜华 来源: 前端充电宝
相关推荐

2009-04-26 15:02:17

安全web

2014-07-25 11:57:28

互联网广告价值

2024-03-25 00:20:00

AI短视频

2021-09-22 10:13:33

云计算安全技术

2015-09-25 14:44:42

微信支付

2020-10-22 15:01:22

大数据互联网医疗

2011-11-18 10:12:04

云计算虚拟化云桌面

2021-02-05 07:11:23

科技VRVR+5G

2019-03-25 22:04:19

编程PythonJava

2020-06-08 19:21:00

GitHub工具 网页

2018-12-28 13:56:35

技术量子人工智能

2010-02-24 13:45:45

FlexRIA

2012-04-20 13:02:09

iOS

2020-09-29 21:26:49

自动驾驶无人驾驶人工智能

2020-11-13 10:10:48

5G网络技术

2009-02-19 09:49:21

AMD分拆制造业务

2016-11-22 09:59:33

5G时代通信技术

2011-07-12 10:34:48

WatsonARM架构RISC架构

2021-09-15 05:26:58

编程语言开发

2020-01-03 14:55:43

人工智能技术机器人
点赞
收藏

51CTO技术栈公众号