原生开发
移动平台指 Android、IOS 等系统。
原生应用程序指一个移动平台特有的应用，使用平台支持的开发工具和语言，直接调用系统提供的 SDK API。
- Android：
Java或Kotlin语言直接调用 Android SDK 开发应用程序 - IOS：
Objective-C或Swift语言直接调用 ios SDK 开发应用程序
优势：
- 可访问平台全部功能
- 速度快、性能高、可实现复杂动画及绘制，用户体验好
缺点：
- 不同平台需要开发维护不同代码
- 动态化（不发版也可以更新应用内容）弱，大多数情况有新功能更新必须发版
纯原生开发面临开发成本和动态化两个问题，因此诞生了一些跨平台的动态化框架。
三类跨平台技术
- H5 + 原生（Cordova，Ionic，微信小程序）
- JavaScript 开发 + 原生渲染（React Native，Weex，快应用）
- 自绘 UI + 原生（QT for mobile，Flutter）
H5 + 原生（Hybrid）
原理：将 APP 一部分需要动态变动的内容通过 H5 实现，通过原生网页加载控件（WebView-Android，WKWebView-ios）来加载。
- H5 部分可随时改变不用发版，动态化
- H5 代码只需一次开发就可以在两个平台运行
- 这种 h5+原生的开发模式称为
混合开发，采用混合开发的 APP 称为混合应用或Hybrid App，如果应用大多数功能都是 H5 实现，称其为Web App
典型代表：Cordova、Ionic、微信小程序（小程序在 webviwe 中渲染，并非原生渲染）
技术点：
- H5 代码运行在 WebView 中，WebView 实质上是浏览器内核，其 JavaScript 运行在一个权限受限的沙箱中，对大多数系统能力无法访问
- 混合框架在原生代码中预先实现一些访问系统能力的 API，暴露给 WebView 以供 JavaScript 调用
- WebView 成为 JavaScript 与原生 API 之间通信的桥梁，将依赖于 WebView 的用于在 JavaScript 与原生之间通信并实现了某种消息传输协议的工具称为
WebView JavaScrip Bridge，即JsBridge，它是混合开发框架的核心
优缺点：优点是动态内容是 H5，web 技术栈，社区及资源丰富；缺点是性能不好，无法实现复杂用户界面或动画。
JavaScript 开发 + 原生渲染
DOM 树与控件树：DOM 树和控件树是等价概念，前者用于 Web 开发中，后者用于原生开发中。
响应式编程：
- 只关注状态（数据）转移，状态变化自动根据新的状态重新构建 UI
- 框架接收到状态变化通知后，根据当前渲染树，结合最新状态改变，计算出树中变化的部分，然后只更新变化的部分
- 第二点中，状态变化后 React 框架不会立即计算并渲染 DOM 树变化部分，会在 DOM 基础上建立一个虚拟 DOM 树，状态改动先会被同步到虚拟 DOM，最后批量同步到真实 DOM（浏览器中每一次 DOM 操作都可能引起浏览器的重绘或回流，频繁操作 DOM 会带来性能问题）
React Native
React 与 React Native：
- React Native 是 React 在原生移动应用平台的衍生产物
- 区别在于虚拟 DOM 映射对象，React 中虚拟 DOM 映射为浏览器 DOM 树，RN 中虚拟 DOM 通过
JavaScriptCore映射为原生控件树
JavaScriptCore：
- 是一个 JavaScript 解释器
- 在 RN 中为 JavaScript 提供运行环境
- 和 JsBridge 一样，是 JavaScript 和原生应用之间的通信桥梁
RN 中将虚拟 DOM 映射为原生控件过程：
- 布局消息传递：将虚拟 DOM 布局信息传递给原生
- 原生根据布局信息渲染控件树
优势：
- RN 使用了 Web 技术栈，只需维护一份代码
- 原生控件渲染，性能比混合开发中 H5 好
Weex
Weex 是阿里巴巴发布的跨平台移动端开发框架，思想及原理和 React Native 类似。
不同在语法层面，Weex 支持 Vue 和 Rax，RN 只支持 JSX。
快应用
快应用是华为、小米、OPPO 等国内 9 大手机厂商制定的轻量级应用标准，采用 JavaScript 开发，原生控件渲染。
与 React Native、Weex 区别：
- 采用 JavaScript 开发，自身不支持 Vue 或 React 语法
- RN 和 Weex 的渲染/排版引擎集成在框架中，每个 APP 都要打包一份，安装包体积较大
- 快应用渲染/排版引擎集成在 ROM 中，应用中无需打包，安装包体积小，快速分发
总结
优势：
- Web 技术栈，社区庞大，上手快，成本低
- 原生渲染，性能比 H5 好
- 动态化较好
缺点：
- 渲染时需要 JavaScript 和原生之间通信，通信频繁会导致卡顿
- JavaScript 为脚本语言，执行时需要
JIT(Just In Time)，执行效率和AOT(Ahead Of Time)代码仍有差距 - 渲染依赖原生控件，不同平台控件需要单独维护；控件受原生 UI 系统限制
自绘 UI + 原生
原理：在不同平台实现一个统一接口的渲染引擎来绘制 UI，不依赖系统原生控件，可以做到不同平台 UI 一致。自绘引擎解决的是 UI 的跨平台问题，如果涉及其他系统能力调用，还要涉及原生开发。
优势：
- 性能高：自绘引擎直接调用系统 API 来绘制 UI，性能和原生控件接近
- 灵活、组件库易维护、UI 外观一致性高
缺点：
- 动态性不足：为保证 UI 绘制性能，一般采用 AOT 模式编译发布包，应用发布后不能像 JIT 作为开发语言的框架那样动态下发代码
QT
QT 是自绘 UI + 原生设计思想的一个典型代表，但在移动端表现不佳
- 使用 C++作为开发语言，效率低，UI 开发灵活性弱
- 移动端发力晚，市场已被 Hybrid、RN 等其他动态框架占领
- 社区小，生态不好
- 官方推广不力
Flutter
Flutter 不会步 QT 后尘
- 生态：目前 Flutter 活跃用户高速增长，社区已经很庞大，文档、资源越来越丰富，开发中很多问题都可以在 github issue 和 Stackoverflow 中找到答案
- 官方支持：Google 正大力推广 Flutter，版本发布频繁
- 开发效率：Flutter 热重载提高开发效率
总结
三种跨平台技术：
| 技术类型 | UI 渲染方式 | 性能 | 开发效率 | 动态化 | 框架代表 |
|---|---|---|---|---|---|
| H5+原生 | WebView 渲染 | 一般 | 高 | 支持 | Cordova、Ionic、微信小程序 |
| JavaScript+原生渲染 | 原生控件渲染 | 好 | 中 | 支持 | RN、Weex、快应用 |
| 自绘 UI+原生 | 调用系统 API 渲染 | 好 | Flutter 高, QT 低 | 默认不支持 | QT、Flutter |