React Native 是否是一次倒行逆施？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1431 days ago, the information mentioned may be changed or developed.

我认为，Web 技术能实现出色的跨平台能力，本质上是因为浏览器提供了一个画板，而我们用 HTML 、CSS 、JS 在上面画出一个个像素，形成组件。也就是自绘。

而 RN 则反过来，编译成原生组件，虽然性能提高了，但跨平台特性就又被削弱了，造成了不一致性。

这不由得让我想到了 Java 的 AWT 和 Swing ，前者就是因为要转成原生组件，所以只能使用系统组件的交集，而且不一致性严重，而后者则走了自绘的道路，性能略低，但不一致性增加。（不讨论 Java 的 GUI ，主要是看理念）

第十五章 GUI 設計(AWT/Swing)與內部類別

所以当我看到 RN 的做法，我一直觉得这是在开倒车。相反来说，我觉得 Flutter 的理念可能更正确点。

补充：

原生第一。但这里只讨论跨平台应用。
RN 和 Flutter 都只是摸了摸，没实际用过。但 web 还是写了不少的。
主 Java ，第二语言 JavaScript 。对前端生态圈熟悉，vue 、react 都比较了解。反而是对 Flutter 可能产生了不切实际的幻想。
仅从开发角度。从用户角度来说，那些选择 RN 的程序，不用 RN 也是 web 三大件，有啥问题又不是我调，性能更高完全不反对。
就是来找喷的

36 replies • 2022-06-22 13:16:16 +08:00

Biwood

Jun 21, 2022 via iPhone

可以把 RN 看作是移动端的 electron ，都是为了实现“用 Web 技术写原生应用”这件事情而已，这不叫倒行逆施，相反是一种探索和进步，如果技术上拥有可行性，为什么不做呢。至于你要不要用，取决于你的业务场景，以及你在开发成本等方面的考量。

Buges

Jun 21, 2022 via Android

你有一个误解认为 web stack 只有 web render （浏览器）这一项。确实浏览器这个 render 提供了非常棒的、多平台一致的绘图环境，也是 web stack 成熟普及的根本原因，但 web stack 远远不止这些，它是 gui 领域最先进的事实标准。如何管理状态，如何交互，如何组织样式，以及各种设计模式（ MVVM 、f(state)=ui ），各种已有的生态（库和开发者）等等，这些才是 react native 这样的库把 web port 回原生平台的价值所在。

meteor957

Jun 21, 2022

react-native-skia 可以看看

ysc3839

Jun 21, 2022 via Android

个人觉得本质还是自绘与原生之争。
选自绘更多是为了不受限于原生，更加自由，但往往会让程序体积增大很多。
选原生是为了有统一的体验，尤其是在苹果这种管控力强的平台上，开发者往往更喜欢把界面弄得和系统一样，也能减小程序体积。
还有一种介于两者之间的，自绘+系统主题，比如 Qt ，但因为是模仿出来的，可能某些细节会不一致，系统更新后也可能出现问题，体积占用减不下来，又会受到系统主题的限制，不能自由设计。

dcsuibian

Jun 21, 2022

@Biwood React Native 有 React Native for Windows + macOS ，那个比较相近吧。
我关注的点不是”做一个独立的客户端“这方面，而是要做跨平台应用“怎么显示组件”这个问题。

dcsuibian

Jun 21, 2022

@meteor957
@ysc3839
是的，我最关心的本质问题还就是自绘和“原生”的问题。（“原生”打引号，因为是跨平台语言编译出的原生组件）
我承认在当前的环境下，RN 确实是有用武之地的，也确实有不少应用。但未来发展困难，因为对于原生组件，说白了，管不了。

darkengine

Jun 21, 2022

要知道 RN 是 React Native ，所以它的理念跟 React 是一致的。React 做了什么，简单的说是把 jsx“翻译”成了浏览器认识的 dom 。这个理念本身走的就不是“自绘”的路子，直接在 Canvas 上画控件才是 (Flutter for web)。而 RN ，则是把 jsx“翻译”成了 iOS/Android 平台的原生控件。按照这个思路，并不能说 RN 是“倒行逆施”。

Lxxyx

Jun 21, 2022

都这么多年了也就不存在倒行逆施了吧。React Native 对于社区而言，就是在当时的情况下难得能用而且好用的跨端方案。

wangtian2020

Jun 21, 2022

能用 html+css 写界面的，都将被用 css 重写
https://github.com/mikke89/RmlUi：HTML/CSS 写 C++应用

Q4h7388nR28s95fa

Jun 21, 2022

要考虑项目开始时的硬件情况吧。

React Native 是 2015 年左右开始搞的，Flutter 是 2017 年左右，其实可以看看那两年手机性能是否发生了翻天覆地的变化。

务实的项目立项是受外部条件影响的，是基于现有条件去选择合适方案，而不是天马行空想干嘛就干嘛。

Alexrx

Jun 21, 2022

RN 当年这种写法其实也还可以，现在来看就不怎么样了。跨平台 UI 还是得用 web 相关的技术才能持续发展下去，移动端的 electron 一直也没出现可能就 flutter 最接近了

daokedao

Jun 21, 2022

@tion126x Ionic 算移动端的 electron 吗

ysc3839

Jun 21, 2022 via Android

另外还想说，某个平台上如果原生的界面框架越简陋越难用，更多人会选择自绘。Windows 只有一个很简陋的界面框架，于是在很多年前绝大多数应用都开始使用自绘了。Linux GUI 我不太了解，但是 Qt 毫无疑问是自绘的，GTK 如何我就不知道了。macOS 的界面框架很完善，选择自绘的应用也少。

Pastsong

Jun 21, 2022

DOM 也不算是自绘吧，本质也还是浏览器提供给你 API 操作它的 UI 库

Buges

Jun 21, 2022 via Android

@ysc3839 自绘也是相对而言，GTK/Qt 对 Linux 来说就是原生，和 DE 集成的很好。再不然就只能用裸 X/wayland API 了。

kop1989smurf

Jun 21, 2022

首先，对于跨平台这个需求而言，“自绘”和“原生”，其实都是一个相对概念而不是绝对概念。
比如 flutter 鼓吹自己比 webview 性能强，又比纯原生有更强的统一性，就是因为他是“原生自定义控件”，他是原生环境，但又是自绘控件。

换句话说，一次开发（ 2022 年的视角看，一般都是 js ），多平台使用，有三个大途径：

1 、webView 套壳。（语法转换量最低，一致性最可控，但性能最差）
2 、在多个平台开发一套自定义控件，并翻译调用。（达到了性能和一致性的平衡）
3 、单纯的把一个开发语言翻译为多平台的开发语言。（最大化了性能，但失去了部分一致性）

libook

Jun 21, 2022

有需求就有市场，市场选择就是车前进的方向。

试想这样一个场景：
一个团队用 React 做了一个网站；
后来发现移动端的流量更高，于是就适配了移动设备；
然后发现基于应用商店的运营策略可以带来更多流量，于是想做 APP ，所以用 WebView 做了个 APP 壳，然后内嵌自己的网站；
后来用户反馈在一些复杂页面很卡（当时手机机能还没现在这么强），同时产品经理希望增加一些现有 Web API 不支持的功能。

作为 CTO ，有如下选择：
1. 保留现有 Web 开发人力开发 Web 端以外，额外招聘同等产能的 Android 和 iOS 开发人员，以原生方案重写，开发人员预算增加 1-2 倍；
2. 让所有前端开发人员去学 Dart 和 Flutter ，招聘具备 Flutter 开发经验的人员补足离职空缺的岗位，原有代码推翻重写，缺轮子找替代品或自己造，不过 APP 性能可以改善不少；
3. 试一下 RN ，原有代码可以得到最大限度复用，开发人员只需要了解一下 RN 的使用方法，还能改善 APP 性能。

当然，最终什么方案适合，得经过深入调研和试验才能得出结论，比如也有可能 RN 与原有架构设计方面不兼容，那就可以考虑是不是还要继续走这条路。

chenyg32

Jun 21, 2022

没有最好的技术方案，只有适合自己的技术方案。

Flutter 一致性比 RN 做得更好，但是其包体积和动态化都不如 RN 。

可以试想下一个看重包体积，对动态化有需求的公司会选择哪个呢？

secondwtq

Jun 21, 2022

假设楼主说的是“正确”的，Flutter 可出来的比 React Native 晚，因此只有“Flutter 相比 React Native 更‘进步’”，没有“React Native 开倒车”的说法

secondwtq

Jun 21, 2022

@ysc3839 你可以认为 Android 和 ChromeOS 也是在 Linux 上“自绘”的 :)

@Buges 裸 Wayland API：指直接传一坨像素点 buffer 过去（

bkmi

Jun 21, 2022 via Android

@HiCode @secondwtq 实际上 Flutter 也是 2015 年出来的，只是那会叫 Sky ，也没什么热度

Danswerme

Jun 21, 2022

@Buges 请教一下，最后一句的“这些才是 react native 这样的库把 web port 回原生平台的价值所在”怎么理解，web port 是什么意思呢

pkupyx

Jun 21, 2022

不一致性恰恰是优点，安卓和 iOS 因为原生组件有区别，用户有些使用习惯就不一样，比如日期选择，强行显示一致反而降低产品体验。

Rocketer

Jun 21, 2022 via iPhone

说到底还是原生有没有必要的争论。

有个著名的故事是——扎克伯格以前也认为原生没必要，那会儿 Facebook 客户端都是 hybrid 的。但有一次他去非洲旅行，享受了一把那里的老旧手机和龟速网络，回来就把 Facebook 客户端改成原生了。

故事真假不重要，重要的在于理解 web 是奢饰品这件事。别让非洲兄弟们用“何不食肉糜”的眼神看你。

Buges

Jun 21, 2022 via Android

@Danswerme 抱歉，顺口了，就是迁移、移植的意思，把你的软件 port 到另一个语言 /框架 /操作系统，携号转网把你的 number port 到另一个运营商。这里就是说把前端用到的技术栈移植回原生开发的意思。

mxT52CRuqR6o5

Jun 21, 2022

如果要考虑 ios 平台的热更新的话，应该是只能使用类似 RN 的技术（这时应该不能用 hermes ）或者 webview

mxT52CRuqR6o5

Jun 21, 2022

还有就是类似 RN 的技术和 webview app 的技术可以在电脑不安装 android/ios 开发环境的情况下配合模拟器 /真机开发 app （换句话说就是仅靠 node 环境就能开发 app ），这个其他方案都是做不到的

rb6221

Jun 21, 2022 via iPhone

跨平台最初的定义是“一次编写，多处运行”。java 最开始就是以此为亮点。
要做到这点，现在主流的方法就是在各平台上塞一个自己的运行时。这点从 java 到 adobe 亦或是 js 都一样。
rn 并不是要做到最终效果能力一样，而是要首先满足“一次编写”，然后有空闲成本了才会去实现次要目标“逼近原生的渲染能力”。

Danswerme

Jun 21, 2022

@Buges 感谢解答

FreshOldMan

Jun 21, 2022

rn 最主要的就是让会 react 的人也可以写 App ，让项目可维护的人变多，就是这么简单

darkengine

Jun 21, 2022

@bkmi 这个很有意思，初期还有 web 的影子在

realpg

PRO

Jun 22, 2022

java awt 和 swing 的并不恰当

在充分了解各自系统限制下，awt 提供了一种通用的原生界面的恰当界面

比如同样代码，在 windows 下很和谐的就像一个 windows 应用程序，在 mac 下很和谐的就像一个 mac 应用程序，“一致的批皮肤”

用 swing ，无论 win 还是 mac ，都有一种这 UI 好奇怪不伦不类的感觉

Alexrx

Jun 22, 2022

@daokedao 可能表述不是很准确。不是没出现而是没有成熟稳定的项目出现

Q4h7388nR28s95fa

Jun 22, 2022

@bkmi 那么是否有一种可能，即当时的手机硬件性能并不足以支撑 Sky ，所以没什么热度？

raykle

Jun 22, 2022

React: JSX -> dom
RN: JSX -> 原生组件（也是 dom ）
有什么区别？

qW7bo2FbzbC0

Jun 22, 2022

”所以只能使用系统组件的交集，而且不一致性严重，而后者则走了自绘的道路，性能略低，但不一致性增加“

我没太理解什么意思，最后半句应该怎么断句