【Flutter学习笔记】认识Flutter和Dart

跨端技术对比

技术类型	UI渲染方式	性能	开发效率	动态化	框架代表
H5+原生	WebView渲染	一般	高	✔️	Cordova、Ionic
JavaScript+原生渲染	原生控件渲染	好	高	✔️	RN、Weex
自绘UI+原生	调用系统API渲染	好	Flutter高, QT低	默认不支持	QT、Flutter

H5+原生

称h5+原生的开发模式为混合开发 ，采用混合模式开发的APP我们称之为混合应用或Hybrid APP ，如果一个应用的大多数功能都是H5实现的话，我们称其为Web APP。

• H5：正常的前端web页面开发，生成的是DOM树，通过JsBridge提供的API调用系统功能。
• JsBridge：混合框架一般都会在原生代码中预先实现一些访问系统能力的API， 然后暴露给WebView以供JavaScript调用。
• WebView：H5页面的容器，同时能连接原生功能给JsBridge接。

JavaScript+原生渲染

与混合开发最大的区别就是：混合开发JS生成的仍是DOM，只是给它一个容器；而JS原生渲染产出的则是原生组件树。

• JS：主要有RN、Weex两种代表，差在语法风格上。JS部分生成虚拟DOM，传递给JSCore。
• JSCore：把虚拟DOM编译成原生组件树

自绘UI+原生

自绘UI+原生更接近原生开发风格，不同的是统一了开发语言，并通过编译引擎生成两套原生机器码。

Flutter/Dart特点

• 跨平台自绘引擎：Skia作为其2D渲染引擎
• 高性能：相比JS的优势
  • Dart在 JIT（即时编译）模式下，速度与 JavaScript基本持平。但是 Dart支持 AOT，当以 AOT模式运行时，JavaScript便远远追不上了。
  • Flutter使用自己的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，所以在布局过程中不需要像RN那样要在JavaScript和Native之间通信，这在一些滑动和拖动的场景下具有明显优势，因为在滑动和拖动过程往往都会引起布局发生变化，所以JavaScript需要和Native之间不停的同步布局信息，这和在浏览器中要JavaScript频繁操作DOM所带来的问题是相同的，都会带来比较可观的性能开销。
• 运行时和编译器支持两种模式
  • 开发JIT：Flutter在开发阶段采用，采用JIT模式，这样就避免了每次改动都要进行编译
  • 发布AOT：Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能
• 类型安全，支持静态类型检测

Flutter架构

Flutter Framework

纯Dart实现的SDK基础库：

• Fondation、Animation、Painting、Gestures：底层UI库，即dart:ui包。可以对应理解为web中的window对象，提供动画、绘制、手势基础API。
• Rendering：基于底层UI实现的布局层，可以理解为React，是Flutter核心。
  • 维护一个UI树（类似React虚拟DOM）
  • 当UI树变化，计算出变化的部分，更新UI树（类似React diff）
  • 响应元素位置、大小的定义和变换，调用底层UI绘制元素（类似React DOM）
• Widget：定义了一些基础组件，其实相当于html元素、小程序标签、React的JSX。我们写Flutter基本就在调这层东西。
• Material、Cupertino：在Widget基础上提供的视觉组件库，相当于Antd、ElementUI。

Flutter Engine

纯C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

Dart关键语法

变量

var t; // 不可改变类型
dynamic t; // 可改变类型
const str1 = "hi world”; // 编译时常量
final str = "hi world”; // 常量：第一次用时初始化
复制代码

函数

bool isNoble(int atomicNumber) {}    // 带类型
bool isNoble （int atomicNumber ）=> _nobleGases [ atomicNumber ] ！= null ;    // 支持箭头函数
String say(String from, String msg, [String device]) {}    // []可选参数
复制代码

异步

Future：

（相当于Promise）

// 相当于new Promise
Future.delayed(new Duration(seconds: 2),(){
   throw AssertionError("Error");
}).then((data){            // 相当于then
   print(data);
}).catchError((e){            // 相当于catch
   print(e);
}).whenComplete((){            // 相当于finally
});

// 相当于Promise.all
Future.wait([
  Future.delayed(new Duration(seconds: 2), () {
    return "hello";
  }),
  Future.delayed(new Duration(seconds: 4), () {
    return " world";
  })
]).then((results){
  print(results[0]+results[1]);
}).catchError((e){
  print(e);
});
复制代码

Async/await：

和JS用法完全一样

Stream：

Promise的决议是不可逆的，一旦Resolve或者Reject了，就不会再改变状态。即使是Promise.all或Promise.race也只决议一次。

Stream能像all/race一样包裹多个Futrue，不同的是每次Future返回都能触发Stream的状态，更像一个事件派发/收集者。

Stream.fromFutures([
  Future.delayed(new Duration(seconds: 1), () {
    return "hello 1";
  }),
  Future.delayed(new Duration(seconds: 2),(){
    throw AssertionError("Error");
  }),
  Future.delayed(new Duration(seconds: 3), () {
    return "hello 3";
  })
]).listen((data){
   print(data);
}, onError: (e){
   print(e.message);
},onDone: (){
});
复制代码

转载于:https://juejin.im/post/5c3d824751882525153c2665