【问题标题】:What is the difference between React Native and Flutter?React Native 和 Flutter 有什么区别?
【发布时间】:2019-06-21 10:44:08
【问题描述】:

从技术上讲,React-nativeFlutter 有什么区别?

这两种技术似乎做的事情相对相同,Flutter 甚至承认它的灵感来自 React:faq

当它们列出相同的功能并具有几乎相同的语法(StatefulWidgetComponent 类)时,这一点更加明显。

类似于 AngularDart 是 Angular 的 Dart 实现;假设 Flutter 是 React 的 Dart 实现是否正确?

【问题讨论】:

    标签: react-native flutter


    【解决方案1】:

    在架构上,React Native (RN) 和 Flutter 非常相似。

    Flutter 所说的“Widget”严格等同于 React 的“Component”。这就是 Flutter 所说的受 React 启发时的意思。

    它们之间的区别在于框架的其他方面:

    解释的 Javascript VS 编译的 Dart

    Flutter 使用 Dart,这是一种类型语言,提供“即时”(JIT) 和“提前”(AOT) 编译(包括 tree-shaking)

    在开发中,Flutter 使用 JIT 编译来实现热重载。对于生产版本,它使用 AOT 编译以获得更好的性能。


    React-Native 使用由称为 JSX 的语法糖增强的 Javascript。

    JSX 是一种不同的语言,它编译为 JS,然后在运行时进行评估。

    桥接原生 VS 完全重写

    React Native 构建在 native 之上

    在 React Native 中使用按钮或文本时,您正在操作用于原生 Android/iOS 应用程序的官方对象。

    我们可以将 React 视为 Android/iOS 之间用于声明布局的通用语言 - 但从根本上说,应用程序是不同的,可能存在不一致。

    这不是真正的跨平台。但同时,它允许与原生元素更好的互操作性。


    Flutter 正好相反。 Flutter 的目标是尽可能少地使用原生元素。

    Flutter 向操作系统请求一个窗口,然后使用 Dart 和 Skia(它是 c++ 图形引擎)完全管理其内容。

    它有一些含义:

    • 所有 UI 逻辑都必须由 Flutter 重新实现。无论是滚动、触摸事件、动画,......
    • 应用程序完全用 Dart 编写,甚至深入到较低层。这意味着无论平台是什么,执行的代码始终相同。
    • 可能任何可以运行 Dart 代码和创建窗口的东西都可以运行 Flutter,并且应用程序应该几乎无需更改即可运行。因此,Web 正在进行中 (Hummingbird),并且提供了对桌面的基本支持。

    在某种程度上,我们可以将 Flutter 比作 webview/游戏引擎,但针对休闲应用进行了优化。

    【讨论】:

    • 所以你基本上问了一个问题,所以你可以自己回答?
    • 这是 Stackoverflow 推荐的,用于分享您的知识。他们甚至在“提问”页面中添加了按钮来做到这一点。见stackoverflow.blog/2011/07/01/…
    • 几个小时前我问过同样的问题,但有些人确实反对:>)
    • “Flutter 和 React Native 有什么区别”是一个非常常见的问题,将它记录在某个地方而不是关闭它是有意义的。
    • @RémiRousselet 我不了解 React Native,但您可以使用 React Native Web github.com/necolas/react-native-web 或 Microsoft 的 ReactXP 使用您的 React Native 项目在 Web 上运行。我可能在这个问题上错了,请纠正我
    【解决方案2】:

    雷米已经有几个优点了。我还有一个。

    用网桥解释 - 与原生和无网桥对比

    尽管名称可能暗示什么,React Native 应用程序编译为本机代码。 React Native 应用程序在运行时解释 Javascript 代码,并且 React Native 应用程序中的组件更新通过 桥接 到对应的原生视图。这可能会减慢速度并成为瓶颈。

    相反,Flutter 应用程序(在发布模式下)编译为本机代码并且不需要桥接器来操作 UI。反过来,至少在理论上,这将提高性能 - 无需往返 本地 来进行简单的 UI 更改。更不用说发布的 Flutter 代码是原生编译的,不涉及任何解释器。

    跳舞猴子,跳舞

    既然我们知道发布模式的 Flutter 应用程序不需要解释器,也不需要用于 UI 操作的桥梁,那么让我们首先看看这两件事到底是什么。

    我们将通过一个高度假设的示例应用来做到这一点。我们的 React Native 应用程序有一个按钮,可以让猴子在屏幕上跳舞。在 React Native 中,我们的按钮和跳舞的猴子组件是用 Javascript 和 React 编写的。

    口译员

    由于 Javascript 不是 Android 或 iOS 上的一流语言,因此您的 React Native 应用程序包含一个 Javascript 解释器,它解释您的 Javascript 代码在运行时强>。如果没有解释器,您将根本无法使用 Javascript 编写应用程序 - 即使是简单的 console.log('Hello World!') 也行不通。

    根据React Native docs,在“大多数情况下”,Javascript 代码将使用 JavascriptCore 进行解释。

    桥梁

    在底层,React Native 使用原生的 Android Views 和 iOS UIViews 在屏幕上显示 UI 组件(例如跳舞的猴子)。但由于 Android 和 iOS SDK 的 UI 部分不使用 Javascript,因此仅使用 Javascript 无法让猴子跳舞。

    这就是一座桥梁发挥作用的地方。桥的另一边是你的 React Native 组件和逻辑,用 Javascript 编写。另一方面,我们有将原生视图呈现到屏幕上的主机 Android/iOS 应用程序。 从现在开始,我们将桥的两侧分别称为Javascript 大陆原生大陆

    那么,当用户点击我们的“跳舞,猴子,跳舞!”时会发生什么?按钮?

    1. 原生 Android/iOS 视图调度 onclick 事件,该事件越过桥梁Javascript 领域
    2. 我们用 Javascript 编写的 onclick 监听器被调用。这是一个简单的调用,用于切换组件内的布尔值。类似于setState(() {isMonkeyDancing = true}) 或类似的东西。
    3. React 发现发生了一些变化。它提供了一个更新的UI 元素表示,其中有一只跳舞的猴子。该表示只是描述 UI 更新状态的普通 Javascript 对象树。
    4. Javascript 对象树被序列化并通过桥发送本地
    5. 宿主应用程序接收序列化的对象树并对其进行反序列化。现在它可以更新原生 Android/iOS 视图以匹配反序列化的 UI 表示。我们的猴子现在在跳舞,我们的用户永远快乐。

    所以在这个例子中,一个按钮需要通过桥两次。

    实际上,它是三个 - 最初只是简单地呈现一个按钮就是跨桥本身的调用。 在一个不仅仅是一个按钮和一只跳舞的猴子的应用程序中,您可能会更多地越过这座桥。每次你这样做时,它都需要序列化数据并将其从一侧发送到另一侧。

    这比仅仅提出 UI 表示并更新 UI直接要慢。此外,与提前编译代码相比,在运行时解释 Javascript 是有代价的。

    底线

    由于 Flutter 本质上是一个可移植的渲染引擎,因此 Flutter 不需要桥接器来进行 UI 更新。因此,至少在理论上,UI 更新更快。这就是为什么与 React Native 相比,使用 Flutter 构建具有复杂动画或 FlareSpriteWidget 甚至游戏的应用程序会更有利可图的原因之一。

    因为 Flutter 在发布模式下是 AOT 编译的,所以 Flutter 也不需要解释器。这就是 Flutter 和 React Native 的区别。

    【讨论】:

    • @liroKrankka 我对 React Native 一无所知,但我认为他们正计划移除桥接并替换为 Javascript 接口,如果我错了,请纠正我
    • 调用非 UI 原生 API 时会怎样?我想他们都需要一座桥。
    • @Buzzware 正确——如果你需要调用Android/iOS原生代码,比如定位API、蓝牙等,那么你需要过桥。这就是 Flutter 所说的“平台通道”。但与 React Native 不同的是,Flutter 不需要桥接器就可以在屏幕上显示某些内容。
    【解决方案3】:

    Flutter vs React Native:开发者视角

    Facebook 的React Native 和谷歌的Flutter – 两种热门的跨平台应用程序开发技术引起了轰动。在这篇文章中,我们将从开发者的角度详细比较两者。

    什么是 Flutter 和 React Native?

    React Native 是 Facebook 内部发起的一个项目,他们于 2015 年开源。另一方面是 Flutter,这是一个由 Google 发起的项目,自 2017 年 I/O 以来他们一直在大力推广。这两者技术帮助应用程序开发人员使用单一编程语言更快地构建跨平台应用程序。 React Native 已经是一个成熟的工具并且拥有庞大的社区,但自 2017 年以来,Flutter 也开始看到巨大的采用率。在这篇文章中,我们将使用十个标准来比较它们:

    • 编程语言
    • 技术架构
    • 安装
    • 设置和项目配置
    • UI 组件和开发 API
    • 开发人员生产力
    • 社区支持
    • 测试支持
    • 构建和发布自动化支持
    • DevOps 和 CI/CD 支持

    编程语言

    使用跨平台移动应用开发技术的主要好处是能够使用单一编程语言为 iOS 和 Android 开发应用。

    • React Native - JavaScript
    • Flutter — Dart

    安装

    安装方法应该简单明了,没有太多复杂的步骤,以便刚开始的开发人员可以轻松学习。

    • React Native - NPM
    • Flutter - 从源代码下载二进制文件

    UI 组件和开发 API

    • React Native - 更少的组件
    • Flutter - 丰富的组件

    结论

    React Native 和 Flutter 各有利弊。一些行业专家预测,Flutter 是移动应用程序开发的未来。从上面的对比来看,很明显 Flutter 已经非常强势地进入了跨平台的移动开发竞赛。让我们不要预测未来,而是静观其变!

    【讨论】:

      【解决方案4】:

      如果您深入学习这两种技术。所以,你会发现很大的不同:

      1. 编程语言-Java Script 和 Dart
      2. 技术架构 - Flex 和 Skia。
      3. UI 组件和开发 API:Flutter 中的小部件,但 React Native 中的视图。
      4. 开发人员生产力:在 Flutter 中调试非常简单。
      5. 社区:React Native 中的大社区支持。
      6. 文档和工具包:Flutter 团队为所有小部件创建了简单的 duc。
      7. 测试支持:Flutter 提供测试库。
      8. DevOps 和 CI/CD:Flutter 提供 CI/CD 支持。

      React Native and Flutter that you can read her的区别比较大。

      【讨论】:

        猜你喜欢
        • 2016-04-11
        • 2017-01-03
        • 2019-04-27
        • 2019-05-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-03-06
        相关资源
        最近更新 更多