[關(guān)于性能]
跨平臺(tái)開發(fā)第一個(gè)考慮的就是性能問(wèn)題
RN的效率由于是將View編譯成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率問(wèn)題,RN的渲染機(jī)制是基于前端框架的考慮,復(fù)雜的UI渲染是需要依賴多個(gè)view疊加.比如我們渲染一個(gè)復(fù)雜的ListView,每一個(gè)小的控件,都是一個(gè)native的view,然后相互組合疊加.想想此時(shí)如果我們的list再需要滑動(dòng)刷新,會(huì)有多少個(gè)對(duì)象需要渲染.所以也就有了前面所說(shuō)的RN的列表方案不友好;
Flutter 吸收了前兩者的教訓(xùn)之后,在渲染技術(shù)上,選擇了自己實(shí)現(xiàn)(GDI),由于有更好的可控性,使用了新的語(yǔ)言Dart,避免了RN的那種通過(guò)橋接器與Javascript通訊導(dǎo)致效率低下的問(wèn)題,所以在性能方面比RN更高一籌;有經(jīng)驗(yàn)的開發(fā)者可以打開Android手機(jī)開發(fā)者選項(xiàng)里面的顯示邊界布局,發(fā)現(xiàn)Flutter的布局是一個(gè)整體.說(shuō)明Flutter的渲染沒(méi)用使用原生控件進(jìn)行渲染
[關(guān)于開發(fā)體驗(yàn)]
Hot Reload(熱重載),這個(gè)對(duì)于原生開發(fā)者是一個(gè)福音,特別是Android開發(fā)者,Android原生改一個(gè)東西運(yùn)行需要好久時(shí)間;對(duì)于Cordova和RN,差別不大,兩個(gè)基本都可以支持熱重載
Widget(組件)
這點(diǎn)和RN的component有些類似,但是比RN更徹底,Flutter自身提供了很多基于 Material Design and Cupertino (iOS-flavor) 風(fēng)格Widget,這點(diǎn)也和Google對(duì)它的定位有關(guān)(Flutter is Google’s mobile UI framework),大家在開發(fā)的時(shí)候更簡(jiǎn)單,特別對(duì)于美工UI設(shè)計(jì)師薄弱中小公司更是福音;? 其他
Dart Flutter使用了新的開發(fā)語(yǔ)言,這個(gè)語(yǔ)言相信大家都沒(méi)聽說(shuō)過(guò),這個(gè)google推出的新的編程語(yǔ)言,屬于動(dòng)態(tài)語(yǔ)言,”結(jié)構(gòu)化的web編程”語(yǔ)言,語(yǔ)法與Javascript 的ES6標(biāo)準(zhǔn)有些類似,有Java和C#語(yǔ)言基礎(chǔ),理解起來(lái)不難.缺點(diǎn)是程序猿們又要學(xué)習(xí)一門新語(yǔ)言了;
除了效率和Widget之外,最期待的還是Flutter的渲染方式,不說(shuō)跨平臺(tái)的開發(fā)語(yǔ)言,就單單Android原生開發(fā),不同的手機(jī)對(duì)不同控件的渲染可能就有不同,希望Flutter自己的渲染平臺(tái)能解決這個(gè)問(wèn)題
從實(shí)現(xiàn)原理上來(lái)講 ReactNative 提供的組件都是繼承自原生 Native 的 View 組件榄檬，比如ReactNative 中的 ListView 在 Android 中就是繼承自 ListView 奥额，還有 RecycleView衔峰。然而 Flutter 則不同捺癞，它的所有 UI 組件都是一幀一幀畫出來(lái)的。這樣也能夠很準(zhǔn)確蓉媳，也很靈活的做出你想要的 UI 蜕乡。其次它還非常人性化的貼近了平臺(tái)的特性，比如 Android 的 Material Design 在 Flutter 就默認(rèn)支持了進(jìn)去设捐。其實(shí)話說(shuō)回來(lái)借浊，在開發(fā)者角度來(lái)講這兩個(gè)跨平臺(tái)都是一樣的使用效果，畢竟都是通過(guò)一套語(yǔ)言來(lái)搭建可運(yùn)行不同平臺(tái)的應(yīng)用萝招。然而蚂斤，F(xiàn)lutter 使用 Dart 語(yǔ)言開發(fā)而 ReactNative 則使用 JS 結(jié)合 XML 來(lái)開發(fā)的。這就有問(wèn)題了槐沼。
React Native較小的安裝包帶來(lái)的優(yōu)勢(shì)不僅是降低了下載門檻曙蒸、減少了磁盤占用, 而且對(duì)于混合開發(fā)的壓力也更小. 試想一個(gè)原生App因?yàn)閹讉€(gè)頁(yè)面使用了Flutter, 一行代碼沒(méi)寫安裝包就憑空增加了30MB, 這樣的結(jié)果不是開發(fā)人員希望看到的.
啟動(dòng)速度RN依然與原生不相上下, 并且要比Flutter好上一個(gè)等級(jí). RN雖然使用js來(lái)構(gòu)建應(yīng)用程序, 但最終RN會(huì)將js轉(zhuǎn)化成原生代碼. 這就讓RN的運(yùn)行效率高出Flutter好幾倍.
內(nèi)存占用方面, RN顯然沒(méi)有原生做的好, 與Flutter的差距也不大, 而且經(jīng)測(cè)試發(fā)現(xiàn), RN的內(nèi)存占用不是很穩(wěn)定, 頁(yè)面剛生成的時(shí)候內(nèi)存占用會(huì)高一點(diǎn), 之后緩慢回落.
1.Flutter在高低端機(jī)的CPU上的表現(xiàn)都優(yōu)于RN岗钩，尤其在低端的小米2s上有著更優(yōu)的表現(xiàn)
2.Android端在原來(lái)FPS基礎(chǔ)上增加了流暢度的指標(biāo)纽窟，F(xiàn)PS和流暢度的表現(xiàn)Flutter優(yōu)于RN(計(jì)算規(guī)則見附參考文章)
3.Android端的內(nèi)存也是值得關(guān)注的一點(diǎn)，在小米2s上起始內(nèi)存Flutter明顯比RN多40M兼吓，RN在測(cè)試過(guò)程中內(nèi)存飛漲臂港，F(xiàn)lutter相比之下會(huì)更穩(wěn)定，內(nèi)存上RN側(cè)的代碼是需要調(diào)優(yōu)的，同一套代碼Flutter在Android和iOS上并沒(méi)有很大的差異审孽，但是RN的卻要在單端調(diào)優(yōu)县袱，F(xiàn)lutter在這項(xiàng)比拼上又更勝一籌。 比較奇怪的是三星S8上Flutter和RN的初始內(nèi)存是一致的佑力，猜測(cè)是RN也Android高端機(jī)型上也會(huì)預(yù)分配一些內(nèi)存显拳，具體細(xì)節(jié)還需要更進(jìn)一步的研究。
ReactNative在滿幀的情況下實(shí)際是卡住的搓萧，不能切換路由杂数，后端服務(wù)關(guān)閉后仍然會(huì)執(zhí)行一段時(shí)間，證明有事件堆積瘸洛。
而Flutter不會(huì)影響路由切換揍移，因?yàn)镕lutter的路由切換在ui主線程上，而react-navigation跑在js線程上反肋。Flutter雖不滿幀但可以實(shí)時(shí)更新數(shù)據(jù)那伐。
總結(jié)：在某些高性能場(chǎng)景下仍需要跨平臺(tái)，F(xiàn)lutter是你唯一的選擇石蔗！
Flutter的性能還可以進(jìn)一步優(yōu)化罕邀，例如采用udp發(fā)送行情數(shù)據(jù)、protobuf替換掉json也會(huì)有比較好的收益
Flutter為布局提供了豐富的組件類养距，具體請(qǐng)查看API https://flutterchina.club/docs/诉探。但是相對(duì)比較麻煩的，比如Image組件就分為new Image.network（加載網(wǎng)絡(luò)圖片）和 Image.asset（加載本地圖片）棍厌，在測(cè)試中我使用過(guò)這個(gè)組件肾胯，但是不知道什么原因，width屬性設(shè)置了也沒(méi)見效果耘纱，height和其他的屬性倒是沒(méi)什么問(wèn)題敬肚。
React Native帶來(lái)了組件化開發(fā)的思想，所謂組件束析，即封裝起來(lái)的具有獨(dú)立功能的UI部件艳馒。React Native 推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義成組件员寇，然后將小的組件通過(guò)組合或者嵌套的方式構(gòu)成大的組件弄慰，最終完成整體UI的構(gòu)建（摘自網(wǎng)絡(luò)）。
React Native使用兩種數(shù)據(jù)來(lái)控制一個(gè)組件：props和state丁恭。props是在父組件中指定曹动，而且一經(jīng)指定，在被指定的組件的生命周期中則不再改變牲览。 對(duì)于需要改變的數(shù)據(jù)墓陈，則需要使用state（摘自網(wǎng)絡(luò)）恶守。
在性能方面Flutter還是比React Native快一點(diǎn)，開發(fā)難度方面React Native比Flutter更加簡(jiǎn)潔方便贡必，
架構(gòu)思想上React Native也相對(duì)較好兔港。
