Flutter介紹

Flutter是Google推出的開源移動(dòng)應(yīng)用開發(fā)框架。開發(fā)者可以通過開發(fā)一套代碼同時(shí)運(yùn)行在iOS和Android平臺(tái)。

它使用Dart語言進(jìn)行開發(fā)，并且最終編譯成各個(gè)平臺(tái)的Native代碼，這樣既保證了開發(fā)效率，也保證了各個(gè)平臺(tái)的運(yùn)行效率。其相當(dāng)于從頭到尾重寫了一套UI框架，不依賴具體平臺(tái)的組件。其所有的組件都是"Widget"。渲染引擎則依靠高效渲染庫Skia實(shí)現(xiàn)。

下面我們對(duì)比一下H5、React Native、Flutter這些跨平臺(tái)的解決方案。

移動(dòng)端的跨平臺(tái)技術(shù)

H5技術(shù)

常被人提起的H5技術(shù)，其實(shí)就是網(wǎng)頁+JavaScript。比如目前的一些流行的JS框架Vue，React，AngularJS等都是為了構(gòu)建網(wǎng)頁。針對(duì)移動(dòng)端構(gòu)建出來的網(wǎng)頁可以實(shí)現(xiàn)在跨平臺(tái)的功能，但是其缺點(diǎn)也很明顯：

• 渲染效率低下，用戶體驗(yàn)差。很多H5在iOS平臺(tái)表現(xiàn)尚可，但是在Android上特別是一些低端機(jī)上的表現(xiàn)確實(shí)讓人不敢恭維。
• 網(wǎng)頁調(diào)用設(shè)備硬件相關(guān)API比較困難，而且支持的功能較少，實(shí)現(xiàn)此類需求是H5的短板。

React Native

React Native（RN）發(fā)布于2015年，也是使用JavaScript語言進(jìn)行跨平臺(tái)APP的開發(fā)。與H5開發(fā)不同的是，它使用JS橋接技術(shù)在運(yùn)行時(shí)編譯成各個(gè)平臺(tái)的Native代碼，其使用的技術(shù)Facebook的Flux技術(shù)。 其優(yōu)點(diǎn)是目前的生態(tài)比較成熟，目前也有很多跨平臺(tái)應(yīng)用使用React Native。它也是跟Flutter對(duì)比的主要對(duì)象。 其特點(diǎn)是：

• 使用JavaScript語言，由于JS被廣泛地使用，所以RN也很容易被接受。
• RN依賴JS的運(yùn)行時(shí)環(huán)境，也就是JS橋接技術(shù)。其使用Facebook的Flux架構(gòu)。
• RN僅提供了UI渲染和設(shè)備訪問的API，很多功能必須依賴第三方庫來實(shí)現(xiàn)對(duì)本地組件的使用。
• 生態(tài)目前比較完善，使用的公司也比較多，特別是對(duì)JS比較熟悉的同學(xué)容易上手。
• 支持熱部署，開發(fā)過程中可以節(jié)約很多時(shí)間。

但是它也并不是完美的：

• 它的渲染方式還是調(diào)用各個(gè)平臺(tái)的原生控件，有時(shí)需要針對(duì)不同的平臺(tái)做不同的優(yōu)化。
• 其性能相對(duì)于H5有很大的提高，但是并沒有完美解決，白屏，丟幀問題依然存在。

Flutter

Flutter也看到了目前的跨平臺(tái)解決方案并不完美，所以它借鑒了React Native的一些思想，做出了很大的優(yōu)化。它將代碼編譯成原生代碼，并且直接在各個(gè)平臺(tái)中使用其高效渲染引擎Skia進(jìn)行渲染，沒有橋接，不調(diào)用平臺(tái)相關(guān)控件。

這種設(shè)計(jì)思想完美解決了不同平臺(tái)的性能問題。

歸功于其設(shè)計(jì)思想，我們可以真正實(shí)現(xiàn)一套代碼，運(yùn)行不同的平臺(tái)。在其推出之后，關(guān)注的開發(fā)者數(shù)量和相關(guān)的教程的增長(zhǎng)速度遠(yuǎn)超當(dāng)時(shí)的React Native。

其特點(diǎn)包括：

• 使用Google自主開發(fā)的Dart語言。Dart語言是一個(gè)強(qiáng)類型的語言，很好地支持面向?qū)ο?#xff0c;并且易于學(xué)習(xí)和使用。
• 使用谷歌自己的Skia渲染引擎，Android自帶Skia引擎，iOS平臺(tái)上Flutter也會(huì)把Skia引擎打包到APP中，實(shí)現(xiàn)高效渲染。
• 目前有非常豐富的視圖組件，可以點(diǎn)擊這里查看其組件目錄，包括Android上常用的材料設(shè)計(jì)（Material Design）的UI風(fēng)格，和iOS風(fēng)格（Cupertino）。由于其渲染不依賴各平臺(tái)相關(guān)組件，所以運(yùn)行在不同平臺(tái)上的效果是一致的。
• 同樣支持熱部署，開發(fā)時(shí)可以像網(wǎng)頁開發(fā)一樣實(shí)時(shí)看到效果。

目前它存在的一些問題是：

• 國(guó)內(nèi)學(xué)習(xí)資源目前并不豐富，使用Flutter的公司也比較少。
• 相關(guān)的生態(tài)還沒有React Native那樣豐富，但是其發(fā)展速度大大超過了React Native。

總結(jié)

雖然Flutter目前并不是非常流行，但是筆者相信它是跨平臺(tái)解決方案的未來。 如果谷歌的新系統(tǒng)Fuchsia OS能像當(dāng)今的Android這樣如日中天，甚至替代掉Android的話，Flutter的發(fā)展也會(huì)迎來它的頂峰。

本系列博客我們就來深入學(xué)習(xí)和探討使用Flutter。

后面的文章我們會(huì)逐步深入學(xué)習(xí)Flutter的功能與實(shí)戰(zhàn)。 我的博客中關(guān)于Flutter的所有文章可以點(diǎn)擊這里找到，歡迎關(guān)注！

如果有問題可以留言，或者給我發(fā)郵件lloyd@examplecode.cn，期待我們共同學(xué)習(xí)與成長(zhǎng)！

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Flutter介绍 - Flutter,H5,React Native之间的对比的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。