V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dcsuibian
V2EX  ›  程序员

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

  •  1
     
  •   dcsuibian · 2022-06-21 12:30:17 +08:00 · 6112 次点击
    这是一个创建于 647 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    img

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

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

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

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

    补充:

    • 原生第一。但这里只讨论跨平台应用。

    • RN 和 Flutter 都只是摸了摸,没实际用过。但 web 还是写了不少的。

    • 主 Java ,第二语言 JavaScript 。对前端生态圈熟悉,vue 、react 都比较了解。反而是对 Flutter 可能产生了不切实际的幻想。

    • 仅从开发角度。从用户角度来说,那些选择 RN 的程序,不用 RN 也是 web 三大件,有啥问题又不是我调,性能更高完全不反对。

    • 就是来找喷的

    36 条回复    2022-06-22 13:16:16 +08:00
    Biwood
        1
    Biwood  
       2022-06-21 12:52:18 +08:00 via iPhone   ❤️ 1
    可以把 RN 看作是移动端的 electron ,都是为了实现“用 Web 技术写原生应用”这件事情而已,这不叫倒行逆施,相反是一种探索和进步,如果技术上拥有可行性,为什么不做呢。至于你要不要用,取决于你的业务场景,以及你在开发成本等方面的考量。
    Buges
        2
    Buges  
       2022-06-21 12:54:22 +08:00 via Android   ❤️ 5
    你有一个误解认为 web stack 只有 web render (浏览器)这一项。确实浏览器这个 render 提供了非常棒的、多平台一致的绘图环境,也是 web stack 成熟普及的根本原因,但 web stack 远远不止这些,它是 gui 领域最先进的事实标准。如何管理状态,如何交互,如何组织样式,以及各种设计模式( MVVM 、f(state)=ui ),各种已有的生态(库和开发者)等等,这些才是 react native 这样的库把 web port 回原生平台的价值所在。
    meteor957
        3
    meteor957  
       2022-06-21 13:06:19 +08:00   ❤️ 2
    react-native-skia 可以看看
    ysc3839
        4
    ysc3839  
       2022-06-21 13:21:03 +08:00 via Android
    个人觉得本质还是自绘与原生之争。
    选自绘更多是为了不受限于原生,更加自由,但往往会让程序体积增大很多。
    选原生是为了有统一的体验,尤其是在苹果这种管控力强的平台上,开发者往往更喜欢把界面弄得和系统一样,也能减小程序体积。
    还有一种介于两者之间的,自绘+系统主题,比如 Qt ,但因为是模仿出来的,可能某些细节会不一致,系统更新后也可能出现问题,体积占用减不下来,又会受到系统主题的限制,不能自由设计。
    dcsuibian
        5
    dcsuibian  
    OP
       2022-06-21 13:25:40 +08:00
    @Biwood React Native 有 React Native for Windows + macOS ,那个比较相近吧。
    我关注的点不是”做一个独立的客户端“这方面,而是要做跨平台应用“怎么显示组件”这个问题。
    dcsuibian
        6
    dcsuibian  
    OP
       2022-06-21 13:36:58 +08:00
    @meteor957
    @ysc3839
    是的,我最关心的本质问题还就是自绘和“原生”的问题。 (“原生”打引号,因为是跨平台语言编译出的原生组件)
    我承认在当前的环境下,RN 确实是有用武之地的,也确实有不少应用。但未来发展困难,因为对于原生组件,说白了,管不了。
    darkengine
        7
    darkengine  
       2022-06-21 13:44:19 +08:00   ❤️ 1
    要知道 RN 是 React Native ,所以它的理念跟 React 是一致的。React 做了什么,简单的说是把 jsx“翻译”成了浏览器认识的 dom 。这个理念本身走的就不是“自绘”的路子,直接在 Canvas 上画控件才是 (Flutter for web)。而 RN ,则是把 jsx“翻译”成了 iOS/Android 平台的原生控件。按照这个思路,并不能说 RN 是“倒行逆施”。
    Lxxyx
        8
    Lxxyx  
       2022-06-21 13:48:35 +08:00
    都这么多年了也就不存在倒行逆施了吧。React Native 对于社区而言,就是在当时的情况下难得能用而且好用的跨端方案。
    wangtian2020
        9
    wangtian2020  
       2022-06-21 13:53:41 +08:00
    能用 html+css 写界面的,都将被用 css 重写
    https://github.com/mikke89/RmlUi:HTML/CSS 写 C++应用
    HiCode
        10
    HiCode  
       2022-06-21 13:59:33 +08:00
    要考虑项目开始时的硬件情况吧。

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

    务实的项目立项是受外部条件影响的,是基于现有条件去选择合适方案,而不是天马行空想干嘛就干嘛。
    tion126x
        11
    tion126x  
       2022-06-21 17:31:29 +08:00
    RN 当年这种写法其实也还可以,现在来看就不怎么样了。跨平台 UI 还是得用 web 相关的技术才能持续发展下去,移动端的 electron 一直也没出现 可能就 flutter 最接近了
    daokedao
        12
    daokedao  
       2022-06-21 17:37:09 +08:00
    @tion126x Ionic 算移动端的 electron 吗
    ysc3839
        13
    ysc3839  
       2022-06-21 17:50:04 +08:00 via Android
    另外还想说,某个平台上如果原生的界面框架越简陋越难用,更多人会选择自绘。Windows 只有一个很简陋的界面框架,于是在很多年前绝大多数应用都开始使用自绘了。Linux GUI 我不太了解,但是 Qt 毫无疑问是自绘的,GTK 如何我就不知道了。macOS 的界面框架很完善,选择自绘的应用也少。
    Pastsong
        14
    Pastsong  
       2022-06-21 17:54:36 +08:00
    DOM 也不算是自绘吧,本质也还是浏览器提供给你 API 操作它的 UI 库
    Buges
        15
    Buges  
       2022-06-21 17:54:40 +08:00 via Android
    @ysc3839 自绘也是相对而言,GTK/Qt 对 Linux 来说就是原生,和 DE 集成的很好。再不然就只能用裸 X/wayland API 了。
    kop1989smurf
        16
    kop1989smurf  
       2022-06-21 18:07:53 +08:00
    首先,对于跨平台这个需求而言,“自绘”和“原生”,其实都是一个相对概念而不是绝对概念。
    比如 flutter 鼓吹自己比 webview 性能强,又比纯原生有更强的统一性,就是因为他是“原生自定义控件”,他是原生环境,但又是自绘控件。

    换句话说,一次开发( 2022 年的视角看,一般都是 js ),多平台使用,有三个大途径:

    1 、webView 套壳。(语法转换量最低,一致性最可控,但性能最差)
    2 、在多个平台开发一套自定义控件,并翻译调用。(达到了性能和一致性的平衡)
    3 、单纯的把一个开发语言翻译为多平台的开发语言。(最大化了性能,但失去了部分一致性)
    libook
        17
    libook  
       2022-06-21 18:21:56 +08:00
    有需求就有市场,市场选择就是车前进的方向。

    试想这样一个场景:
    一个团队用 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
        18
    chenyg32  
       2022-06-21 19:41:07 +08:00
    没有最好的技术方案,只有适合自己的技术方案。

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

    可以试想下一个看重包体积,对动态化有需求的公司会选择哪个呢?
    secondwtq
        19
    secondwtq  
       2022-06-21 21:02:33 +08:00
    假设楼主说的是“正确”的,Flutter 可出来的比 React Native 晚,因此只有“Flutter 相比 React Native 更‘进步’”,没有“React Native 开倒车”的说法
    secondwtq
        20
    secondwtq  
       2022-06-21 21:06:16 +08:00
    @ysc3839 你可以认为 Android 和 ChromeOS 也是在 Linux 上“自绘”的 :)

    @Buges 裸 Wayland API:指直接传一坨像素点 buffer 过去(
    bkmi
        21
    bkmi  
       2022-06-21 21:50:48 +08:00 via Android
    @HiCode @secondwtq 实际上 Flutter 也是 2015 年出来的,只是那会叫 Sky ,也没什么热度
    Danswerme
        22
    Danswerme  
       2022-06-21 21:57:51 +08:00
    @Buges 请教一下,最后一句的“这些才是 react native 这样的库把 web port 回原生平台的价值所在”怎么理解,web port 是什么意思呢
    pkupyx
        23
    pkupyx  
       2022-06-21 21:58:51 +08:00
    不一致性恰恰是优点,安卓和 iOS 因为原生组件有区别,用户有些使用习惯就不一样,比如日期选择,强行显示一致反而降低产品体验。
    Rocketer
        24
    Rocketer  
       2022-06-21 22:10:33 +08:00 via iPhone
    说到底还是原生有没有必要的争论。

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

    故事真假不重要,重要的在于理解 web 是奢饰品这件事。别让非洲兄弟们用“何不食肉糜”的眼神看你。
    Buges
        25
    Buges  
       2022-06-21 22:13:29 +08:00 via Android
    @Danswerme 抱歉,顺口了,就是迁移、移植的意思,把你的软件 port 到另一个语言 /框架 /操作系统,携号转网把你的 number port 到另一个运营商。这里就是说把前端用到的技术栈移植回原生开发的意思。
    mxT52CRuqR6o5
        26
    mxT52CRuqR6o5  
       2022-06-21 22:16:56 +08:00
    如果要考虑 ios 平台的热更新的话,应该是只能使用类似 RN 的技术(这时应该不能用 hermes )或者 webview
    mxT52CRuqR6o5
        27
    mxT52CRuqR6o5  
       2022-06-21 22:19:26 +08:00
    还有就是类似 RN 的技术和 webview app 的技术可以在电脑不安装 android/ios 开发环境的情况下配合模拟器 /真机开发 app (换句话说就是仅靠 node 环境就能开发 app ),这个其他方案都是做不到的
    janus77
        28
    janus77  
       2022-06-21 22:55:09 +08:00 via iPhone
    跨平台最初的定义是“一次编写,多处运行”。java 最开始就是以此为亮点。
    要做到这点,现在主流的方法就是在各平台上塞一个自己的运行时。这点从 java 到 adobe 亦或是 js 都一样。
    rn 并不是要做到最终效果能力一样,而是要首先满足“一次编写”,然后有空闲成本了才会去实现次要目标“逼近原生的渲染能力”。
    Danswerme
        29
    Danswerme  
       2022-06-21 23:00:48 +08:00
    @Buges 感谢解答
    FreshOldMan
        30
    FreshOldMan  
       2022-06-21 23:12:32 +08:00
    rn 最主要的就是 让会 react 的人也可以写 App ,让项目可维护的人变多,就是这么简单
    darkengine
        31
    darkengine  
       2022-06-21 23:36:15 +08:00
    @bkmi 这个很有意思,初期还有 web 的影子在
    realpg
        32
    realpg  
       2022-06-22 00:10:12 +08:00
    java awt 和 swing 的并不恰当

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

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

    用 swing ,无论 win 还是 mac ,都有一种这 UI 好奇怪不伦不类的感觉
    tion126x
        33
    tion126x  
       2022-06-22 04:34:50 +08:00
    @daokedao 可能表述不是很准确。不是没出现 而是没有成熟稳定的项目出现
    HiCode
        34
    HiCode  
       2022-06-22 10:39:00 +08:00
    @bkmi 那么是否有一种可能,即当时的手机硬件性能并不足以支撑 Sky ,所以没什么热度?
    raykle
        35
    raykle  
       2022-06-22 10:46:38 +08:00
    React: JSX -> dom
    RN: JSX -> 原生组件(也是 dom )
    有什么区别?
    qW7bo2FbzbC0
        36
    qW7bo2FbzbC0  
       2022-06-22 13:16:16 +08:00
    ”所以只能使用系统组件的交集,而且不一致性严重,而后者则走了自绘的道路,性能略低,但不一致性增加“

    我没太理解什么意思,最后半句应该怎么断句
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5665 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 06:07 · PVG 14:07 · LAX 23:07 · JFK 02:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.