Flutter和RN的对比
React Native通过写 JS 代码配置页面布局,然后 React Native 最终会解析渲染成原生控件,如 View对应 ViewGroup/UIView , ScrollView对应 ScrollView/UIScrollView ,Image对应 ImageView/UIImageView 等。
| RN 组件 | iOS 原生 | Android 原生 | 说明 |
|---|---|---|---|
| View | RCTView → UIView | ReactViewGroup → ViewGroup | 所有布局的基础 |
| Text | RCTTextView / RCTTextShadowView | ReactTextView | 文本可嵌套 |
| Image | RCTImageView → UIImageView | ReactImageView | 支持网络图片 |
| ScrollView | RCTScrollView → UIScrollView | ReactScrollView | 不可嵌套同向 |
Flutter中绝大部分的 Widget 都与平台无关, 开发者基于 Framework 开发 App ,而 Framework 运行在 Engine 之上,由 Engine 进行适配和跨平台支持。这个跨平台的支持过程,其实就是将 Flutter UI 中的 Widget “数据化” ,然后通过 Engine 上的 Skia 直接绘制到屏幕上

Hot Reload原理
Flutter 提供的两种编译模式中,AOT 是静态编译,即编译成设备可直接执行的二进制码;而 JIT 则是动态编译,即将 Dart 代码编译成中间代码(Script Snapshot),在运行时设备需要 Dart VM 解释执行。
而热重载之所以只能在 Debug 模式下使用,是因为 Debug 模式下,Flutter 采用的是 JIT 动态编译(而 Release 模式下采用的是 AOT 静态编译)。JIT 编译器将 Dart 代码编译成可以运行在 Dart VM 上的 Dart Kernel,而 Dart Kernel 是可以动态更新的,这就实现了代码的实时更新功能.
Dart 是不是单线程模型?是如何运行的?
Dart 是单线程模型,如何运行的看这张图:

说一下 mixin
Dart为了支持多重继承,引入了mixin关键字,它最大的特殊处在于: mixin定义的类不能有构造方法,这样可以避免继承多个类而产生的父类构造方法冲突
混入的是实现, 而非抽象类定义接口
什么是 Widgets、RenderObjects 和 Elements?
Widget 仅用于存储渲染所需要的信息。•RenderObject 负责管理布局、绘制等操作。•Element 才是这颗巨大的控件树上的实体。
StatefulWidget 的生命周期

dart是值传递还是引用传递?
值传递
void change(int x) {
x = 10;
}
void main() {
int a = 5;
change(a);
print(a); // 5
}
void addItem(List<int> list) {
list.add(3);
}
void main() {
var l = [1, 2];
addItem(l);
print(l); // [1, 2, 3]
}
void reset(List<int> list) {
list = [9, 9, 9];
}
void main() {
var l = [1, 2];
reset(l);
print(l); // [1, 2]
}
Flutter三种不同类型的Channel
Flutter在不使用WebView和JS方案的情况下。如何做到热更新?说一下大概思路。
可以接入Tinker进行热更新,而且有Bugly做为补丁版本控制台,来上传下发补丁,统计数量。
如何让Flutter 编译出来的APP的包大小尽可能的变小?
移除无用代码和无用资源,压缩图片, 安卓里拆 App Bundle,
Dart 编译产物做针对性优化
精简机器码指令,Google 也回复称未来 Dart 与 OC 基本持平。
Flutter渲染优化有哪些见解
1. 让 Flutter 中重建组件的个数尽量少
在实际开发过程中,如果将整个页面写在一个单独的 StatefulWidget 中,那么每次状态更新时都会导致很多不必要的 UI 重建。因此, 我们要学会拆解组件,使用良好设计模式和状态管理方案,当需要更新状态时将影响范围降到最小。
2. 构建组件时使用 const 关键词,可以抑制 widget 的重建
合理利用 const 关键词,可以在很大程度上优化应用的性能
使用 const 也需要注意如下几点:
3. Flutter实现的一些效果背后可能会使用 saveLayer() 这个代价很大的方法
如下这几个组件,底层都会触发 saveLayer() 的调用,同样也都会导致性能的损耗:
4. 官方也给了我们一些非常需要注意的优化点:
由于 Opacity 会使用屏幕外缓冲区直接使目标组件中不透明,因此能不用 Opacity Widget,就尽量不要用。有关将透明度直接应用于图像的示例,请参见 Transparent image,比使用 Opacity widget 更快,性能更好。
要在图像中实现淡入淡出,请考虑使用 FadeInImage 小部件,该小部件使用 GPU 的片段着色器应用渐变不透明度。
很多场景下,我们确实没必要直接使用 Opacity 改变透明度,如要作用于一个图片的时候可以直接使用透明的图片,或者直接使用 Container:Container(color: Color.fromRGBO(255, 0, 0, 0.5))
Clipping 不会调用 saveLayer()(除非明确使用 Clip.antiAliasWithSaveLayer),因此这些操作没有 Opacity 那么耗时,但仍然很耗时,所以请谨慎使用。
5. 管理着色器编译垃圾
有时候,应用中的动画首次运行时会看起来非常卡顿,但是运行多次之后便可以正常运行,这可能就是由于着色器编译混乱导致的。
在不同平台上,可以执行以下命令,使用 SkSL 预热功能构建应用程序:
安卓
flutter build apk — bundle-sksl-path flutter_01.sksl.json
iOS
flutter build ios --bundle-sksl-path flutter_01.sksl.json