react native 为什么react-native 打包出来100多M_为什么尽早选择Flutter（内附Flutter开发实用链接）...

最新推荐文章于 2024-07-30 10:04:38 发布

weixin_39608118

最新推荐文章于 2024-07-30 10:04:38 发布

阅读量448

点赞数

文章标签： react native 为什么react-native 打包出来100多M

我在 2018 开始对 flutter 产生兴趣，并乐此不疲的开始尝试着flutter带来的体验。刚好那个时间公司开发策略上面发生了转变，抽出团队开始着手于Flutter的调研与开发。提前有准备的人从来不会被动，是时候展现真正的技能啦，心里暗爽！

那个时间资料很少我和我的同事们接到要任务就是直接实战了，基本上也是边学习边开发的状态。中文文档翻译的问题也不是首选，所以我最终选择去啃Flutter的英文文档。(ps：英语四级开始很吃力，慢慢就能够适应)这里就不过多叙述了。一路走来两年时间经历过很多也积攒了很多Flutter的实战经验，坑虽多但办法更多，哈哈~一个小伙伴跟我沟通让我把我的一些经验分享出来，能够让很多的人快速入门Flutter解决实战中的一些疑难问题，我思考了一下觉得我做的是一件有意义的事情，所以接下来我会持续的输出我的干货。（欢迎大家关注我 ~期待和大家一起交流和学习Flutter的相关知识）

什么是Flutter?

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。

Flutter 可以方便的加入现有的工程中。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter是完全免费、开源的。它也是构建未来的 Google Fuchsia 应用的主要方式。

Flutter 组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter 会对比之前的描述，以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

移动端革命之路-Google为什么以Fullter作为原生突破口

Android系统作为全球第一大系统，基于Java开发的移动端有着诸多的性能优势。2018年前 H5的性能瓶颈和RN的停更导致业界对跨平台开发失去信心。直到2018年10月Google推出首个Flutter跨平台解决方案，打破整个移动开发的方向

为什么Flutter成为跨平台方向标

1、跨平台性: Flutter基于图像绘制引擎进行渲染，在不同平台下绘制效果是绝对一致的，能做到真正的跨平台，一处写处处运行

2、性能优异性: 不同于H5通过DOM渲染和RN映射组件，Flutter直接基于native进行绘制。性能上完全超过原生

3、热重载性:Android原生开发会遇到编译-打包-安装三部曲。开发效率迟迟得不到提升。热重载技术在Flutter内完美体现

Flutter详情介绍

1、Dart语法编译: Dart 是一种强类型、跨平台的客户端开发语言。具有专门为客户端优化、高生产力、快速高效、可移植易学的风格。Dart主要由Google负责开发和维护

2、Flutter插件: Flutter使用的Dart语言无法直接调用Android系统提供的Java接口，这时就需要使用插件来实现中转。Flutter官方提供了丰富的原生接口封装

Flutter系统架构

Flutter分为三大部分：由Dart语言负责的Framwork层、Dart语法执行器、Skia图像处理引擎

Sika图像处理引擎

1、2005年Skia图像处理引擎成立，用来展示Chrome 火狐和其他Google自家的产品使用

2、2007年第一个Android系统问世，于是Google开发者将Skia移植到Android平台

3、Skia作为一个2D的图形系统，包括绘图，渲染，显示图片都是用Skia完成

原生开发会接触到Skia吗？

Skia引擎详解

疑问：是真的吗？我只接触过Bitmap，原来Bitmap下面还有很多奥秘

为什么Flutter会实现三大特性（跨平台，性能高，热重载）

跨平台

性能优异

渲染流程

React渲染与Flutter渲染相同点

React渲染与Flutter渲染不同点

1、绘制树: ReactNative基于ReactShadow的链式结构在内存中形成一个虚拟的Dom树，Flutter是通过引擎实现不同图层的渲染方式

2、机制不一样: ReactNative最终被反射成原生控件，而Flutter是底层通过引擎直接渲染，不存在映射的说法

Flutter渲染

在Flutter界面渲染过程分为三个阶段：布局、绘制、合成，布局和绘制在Flutter框架中完成合成则交由引擎负责。

结束语：

看到了这里是不是更清晰了。大前端终将是趋势。Flutter 作为新兴的混合开发解决方案，已经被广泛关注和使用，这不光是因为它有 Google 的支持，更因为它提供了更完善的文档和更高效的运行方式，开发者不必再把大量精力放到不同平台的展示上，更好的完成自己的业务，从企业管理者角度看，也大大降低了开发成本。

最后，如果有任何疑问，可以私信，留言给我，我会在第一时间为你解答。

友情提供开发链接：

Flutter官网

https://flutter.ioflutter.io

字体图标生成

FlutterIcon - Flutter custom icons generatorfluttericon.com

Flutter中文网

Flutter中文网flutterchina.club