Flutter、ReactJS和小程序容器技术，选哪个？

你想更迅速地开发一款移动应用吗？你想通过跨平台技术减少开发成本吗？你还在为不知道选择哪一种技术焦虑吗？

本文正是解决你的焦虑的，我们比较了跨端方案的佼佼者：Flutter 和 ReactJS，并从 App 所有者的角度出发帮助你判断哪一款框架更适合你的 App 的需求，同时我们也为大家分享了Flutter与小程序容器技术结合可以如何为移动应用降本增效。

我们希望这篇文章能帮助你在为你的 App 选择跨端方案时做出明智且合理的决策。

在过去的几年里，信息技术行业一直处于蓬勃发展之中。同样，移动应用开发行业也获得了巨大的人气。特别是在疫情期间，移动应用程序在人类生活中发挥了重要作用。因此，移动应用市场相当大，Android应用程序有348万个，iOS有222万个。

如果你在Flutter和ReactJS之间感到困惑，那么也许可以在下文中找到答案。

在IT领域，ReactJS和Flutter在全世界都很受欢迎。Flutter由谷歌创建，React由Facebook创建。两者的功能各不相同。因为ReactJS是一个JavaScript库，而Flutter是一个框架。但它们之间有一个相似之处：ReactJS和Flutter都用于前端开发。

在全球开发者社区中，Flutter是最受欢迎的跨平台移动框架，在2021年有42%的软件开发者使用它。另一方面，ReactJS是使用最多的web框架，在2021年有40.14%的开发者使用过它。

今天我们将讨论：什么是Flutter和ReactJS，在2022年Flutter和ReactJS之间哪个更好?

在继续之前，让我们更深入地了解一下ReactJS和Flutter。

关于Flutter

Flutter 为跨平台开发赋能。

它为开发人员提供了一种简便的方法来为移动应用（iOS、Android）、Web 和桌面端构建和部署具有视觉吸引力的原生编译的应用程序：一套代码运行在多端，即所谓的一次编写处处运行。

Flutter 具有平台无关性，因为它具有自己的 widgets 和设计，这意味着你可以在两个平台上拥有完全相同的应用程序（如果你希望区分自己的应用程序，这同样容易实现）。

从官方公布的数据上， Flutter 已经基本超过其他跨平台框架，成为最受欢迎的移动端跨平台开发工具，截至 2022 年 2 月，有近 50 万个应用程序使用了 Flutter。

Flutter是一个来自谷歌的开源软件开发工具包，它允许开发者基于单一的代码库为Android、iOS、Linux、macOS和Windows创建跨平台应用程序、web和移动应用程序，开发者可不必为iOS或Android应用编写不同的代码

这是谷歌的SDK，用现有的代码创建跨越移动、web和桌面的吸引人的、快速的体验。Flutter集成了现有的代码，并被世界各地的公司使用。

Flutter使用一个高效的、可扩展的和开放的平台来为iOS、Android、web、Windows、macOS、Linux构建应用程序，或将Flutter嵌入为您选择的任何平台的UI框架，从而促进优雅、快速的应用程序的创建。

Flutter是如何工作的

Flutter框架包括一个引擎、基础库和小组件。Flutter的移动应用开发方法非常独特，因为它的声明式UI，所以开发人员只需要从头开始。因此，在开始某些元素的开发过程之前，编码器/业务所有者需要对UI需求有一个清晰的认识。因为开发人员可以通过组合不同的小组件来创建整个用户界面。

Flutter也允许专业人员创建自定义组件。稍后可以将这些小组件与现有的小组件融合。为了增强UX(用户体验)，开发人员需要增强应用程序功能。Flutter框架还提供了几个软件包，允许访问Firebase和Redux数据仓库。

关于ReactJS

React是一个免费的开源JavaScript库，web开发者使用它来构建使用UI组件的用户界面。ReactJS通常用于构建单页面的web应用程序。

事实上，React可以使用诸如Next.js这样的框架来构建单页面、移动或服务器呈现的应用程序。但是React只关心处理状态并将其呈现给DOM。因此，React应用程序通常需要特定的客户端功能以及用于路由的附加库。

在React中，代码由位于SRC文件夹中的可重用组件组成，并使用Pascal Case(大写驼峰)命名。使用React DOM库，可以将组件呈现给DOM中的特定元素。当渲染一个组件时，它的值可以通过“props”在组件之间传递。

ReactJS是如何工作的

使用ReactJS的最大好处是，它允许开发人员使用JavaScript注入HTML代码。开发人员可以通过声明Element函数来构建DOM节点的表示。它还允许开发人员检查HTML代码的语法。所以ReactJS没有使用传统的DOM类，而是使用了className.JSX标记用于名称、子元素和属性。

在ReactJS中，数值和表达式都必须写在括号{}中。JSX属性中的“引号”表示字符串。在大多数用例中，ReactJS是使用JSX而不是标准JavaScript编写的，以简化组件并保持代码整洁。ReactJS应用程序通常只有一个根DOM节点。它将元素呈现到DOM中，并更改页面的UI。

关于小程序

小程序作为我国技术研发届的一个独特产物，由于其轻量、便捷、优质的体验在近些年得到迅速的发展，特别是在腾讯、阿里、百度、字节等各家大厂的小程序开发平台助推下，其中仅微信小程序的数量就超过 700 万，小程序开发者数量 300-400 万人，规模相当惊人，而且小程序的DAU也在不断递增。

小程序的运行原理

小程序是如何运行的？它的工作原理是什么？

小程序的出现不是一蹴而就，而是在移动互联网近10年的业务、场景积累上逐步发展起来的。Web开发具有高效、灵活、门槛低的特点，但弊端在于所有的页面都依赖浏览器的渲染，浏览器的能力就是的web研发的上限和边界。为了克服这个问题，于是便有了JS-Bridge这种方式，将很多常用组件内置到应用中，当内嵌组件足够多的时候，再做一层封装，形成了JS-SDK，其本质没有差别。

小程序在JS-SDK的基础上，一方面进一步开放和拓展原生的能力给到Web前端调用，另一方面，页面渲染（Webview Render）的UI层和逻辑层，使用了两个独立的线程。如下图所示：

小程序可以和跨端方案如何结合呢？

小程序与 Flutter 最密切关联还是在渲染优化上，先来看看整个框架：

​

在这个架构下，我们就将 Layout 层的 LV-CPP 专门的作为小程序的 UI 体系处理器，将 UI 信息布局计算好再提交给抽象的后端去渲染，LV-CPP 作为小程序的框架和渲染器的中间层，集中的在 C++ 层去处理与 Web 相关的复杂特性。渲染端就可以基于特定的协议和接口专注将元素转化为 UI 组件，最终绘制出来。

通过结合 Flutter 和 LV-CPP，我们把实现代码收敛在 C++ 和 Dart 上，进一步简化了基于小程序技术栈实现跨平台业务开发的框架维护成本。

再来看看各家厂商是如何开展的：

京东：把 Flutter 扩展到微信小程序端的探索

京东发起了 Flutter_mp 的开源项目，此框架主要做到两件事情： 1. 需要根据 Flutter 生成相关的小程序 wxml 模板文件。 2. 收集 wxml 渲染需要的数据，放置到小程序组件的 data 字段。 flutter_mp 还处于早期的实验阶段，很多功能还在探索规划中，只支持 Center，Column，Container，Expanded，Image.asset，ListView，Row，Text 这些基本 Widget，暂不支持 自定义 Widget，而且自己的 Flutter 代码只能够出现在 lib/main.dart 文件中。

微信：基于小程序技术栈的微信客户端跨平台实践

微信小程序，最开始是采用 Webview 渲染的方案，后面又采用了 React-Native-Like 的方案，再后来微信提出了一个很大胆的想法：上层依然使用 WXML+WXSS 来表示，但是底层使用 Flutter 引擎来渲染，而且他们觉得 Platform Channel 通信效率低，自己整了一个 dart2cpp 的模块来负责通信。目前微信不会放弃 WebView 渲染，尝试仅限于微信客户端内部部分场景使用。

FinClip：基于小程序技术的跨端开发平台建设

FinClip是目前市面上比较热门小程序容器技术，一个可以让任何APP都能具备小程序运行能力的前端容器技术，只需简单集成FinClip SDK ,即可在 iPhone、Android、Windows、Linux、macOS、统信等平台下的应用中运行你的小程序，这意味着，移动端、PC 端、车载设备、智能电视、智能手表都能使用小程序了，实现多端互通，同时兼容互联网主流小程序技术语法，可采用 Vue、react 基础上的 DSL 框架。

实际上不与 Flutter、Reactive-Native、100% Native 或 Framework 们技术冲突，嵌入即可，个体小程序开发依然可享受 React 等 Web Framework、mate Framework、DSL Frameworke 的成果。

FinClip 小程序容器技术，将视图层与逻辑层分离也带来了许多好处：

1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验； 2、Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染，这有助于提高渲染性能； 3、因为 JS 在 Service 层执行，所以 JS 里面操作的 DOM 将不会对 View 层产生影响，所以小程序不能操作 DOM 结构的，这也使得小程序的性能比传统的 H5 更好。

FinClip 提供了 Flutter SDK，支持在 Flutter 环境使用小程序；以满足 Flutter 和小程序混编的效果。这里也放上 FinClip 在 Flutter 开发框架集成的文档进行参考： Flutter 集成指引。

 任何事物的发展都具有周期性，显然小程序的这波红利已经到来， 今天的创新可能就是明天的标配。当务之急，尽早上船拿到“船票”。