Flutter学习笔记（第一天）

1.原生开发

优点：
可访问平台全部功能（GPS、摄像头）；
速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；

缺点：
平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；
内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；

2.跨平台

根据其原理，主要分为三类：
H5 + 原生（Cordova、Ionic、微信小程序）
JavaScript 开发 + 原生渲染 （React Native、Weex）
自绘UI + 原生 (Qt for mobile、Flutter)

2.1H5 + 原生

通过原生的网页加载控件WebView （Android）或 WKWebView（iOS），称为混合开发。而混合开发中，H5代码是运行在 WebView 中，而 WebView 实质上就是一个浏览器内核，其 JavaScript 依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。所以，对于 H5 不能实现的功能，就需要原生去做了。

混合框架一般都会在原生代码中预先实现一些访问系统能力的 API ， 然后暴露给 WebView 以供 JavaScript 调用。这样一来，WebView 中 JavaScript 与原生 API 之间就需要一个通信的桥梁，主要负责 JavaScript 与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于 WebView 的用于在 JavaScript 与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge , 简称 JsBridge，它也是混合开发框架的核心。

混合应用的优点是：动态内容可以用 H5开发，而H5是Web 技术栈，Web技术栈生态开放且社区资源丰富，整体开发效率高。缺点是性能体验不佳，对于复杂用户界面或动画，WebView 有时会不堪重任。

2.2React Native、Weex

React 是一个响应式的 Web 框架，先了解一下两个重要的概念：DOM 树与响应式编程。

DOM树和控件树是等价的概念，分别指代前端开发中的HTML渲染树和原生开发中的控件布局树。DOM操作指的是直接操作渲染树（或控件树）的操作。

响应式编程是一种编程范式，其中状态改变会自动触发界面的更新。在React中，React框架会根据状态变化重新构建UI。它通过Diff算法计算出渲染树中发生变化的部分，并仅更新这部分内容，而不是重新构建整个树，以提高性能。

React利用虚拟DOM树来同步数据和状态的改变。每次状态变化都会在虚拟DOM上进行操作，最后再将批量更新同步到真实DOM中。这样做的目的是避免频繁的DOM操作，因为每次DOM操作都可能引起浏览器的重绘或回流，性能开销较大。

总结起来，使用虚拟DOM和批量更新的方式可以更高效地处理DOM操作，避免不必要的性能损耗。

思考：Diff操作和DOM批量更新难道不应该是浏览器的职责吗？第三方框架中去做合不合适？
答： Diff操作和DOM批量更新是前端开发中常见的任务，确实是浏览器的职责之一。浏览器负责解析HTML、CSS，并将它们渲染成可交互的网页。然而，由于不同浏览器的实现和性能表现存在差异，以及现代前端应用对复杂交互和实时更新的需求，第三方框架通常被用来提供更高效、灵活和一致的解决方案。

使用第三方框架来处理Diff操作和DOM批量更新具有以下优势：

性能优化：第三方框架通常会针对不同浏览器的特性和性能进行优化，提供更高效的Diff算法和DOM更新策略。

抽象复杂性：前端框架通过封装Diff操作和DOM更新过程，提供更简洁