目前跨端開發(fā)比較熱門的就是 React Native 和 Flutter 了佩伤，到底該選哪門技術(shù)似乎也快成了大前端圈的一個熱門話題。對于web前端來說孤荣，基于web生態(tài)的 React Native 應(yīng)該是一個更加順暢而自然的選擇盐股；但 Flutter 讓人動心的地方就是高性能和 跨端UI一致性疯汁。而React Native 發(fā)展不太明朗和 Flutter 越發(fā)成熟的走勢對比促使我從觀望的心態(tài)轉(zhuǎn)為加入 Flutter。
這里主要就是記錄一下學(xué)習(xí)Flutter的一些感想和看法：
- 包管理
- 布局和樣式
- json
- 狀態(tài)管理
包管理
pubspec.yaml 文件的作用類似于 npm 的 package.json 溢豆，而yaml格式也比json方便。但是不能用命令行自動安裝包卻讓習(xí)慣了npm的我覺得麻煩。因?yàn)镕lutter 安裝依賴包是這么一個流程：
- 打開pub.dev網(wǎng)站冷尉；
- 搜索需要的包系枪，得到包的名稱和版本雀哨；
- 把包名稱和版本填入
pubspec.yaml，最后才開始下載包私爷。
我覺得應(yīng)該直接命令行安裝包雾棺，讓它幫我們下載捌浩，名稱版本自動寫入pubspec.yaml。如果沒有指定版本就是默認(rèn)下載最新版本尸饺，因?yàn)楹芏鄷r候我們并不想知道版本號螟碎，給我個能用的最新的版本號就ok了。
布局和樣式
就和很多人想的一樣，為什么不使用 jsx 或者 xml 格式進(jìn)行布局褥民，因?yàn)榛诖a的方式看起來太不直觀了耘拇，之所以這樣聽說主要是能更方便的和Dart的hot reload特性配合使用撵颊，代碼改動能立刻反映布局變化。但我還是期待有適配轉(zhuǎn)化 DSL 的框架出現(xiàn)惫叛。
Flutter一切都是widget妻熊，但是連很多屬性都當(dāng)成widget 這就讓人有些看不明白了，比如 Center仑最，Align扔役，Padding，為什么不把常用的樣式屬性都加入到布局組件里面呢警医？這導(dǎo)致出現(xiàn)了這么一種情況：嵌套嚴(yán)重亿胸，一個很簡單的功能需要層層嵌套才能實(shí)現(xiàn)，而且樣式也不能方便的復(fù)用预皇。目前比較合理的建議就是適當(dāng)抽取出子組件減少嵌套侈玄。
Json
Dart 作為強(qiáng)類型的語言，一切皆是對象吟温。Dart要方便操作json就得把json轉(zhuǎn)化為對象序仙，這就意味著每用到一個json，就需要定義一個對應(yīng)的類鲁豪，這也是強(qiáng)類型語言的通病了诱桂。這絕對讓人很懷念 js/ts 這種對json操作非常自然順暢的弱類型/函數(shù)式語言洋丐。當(dāng)然也不是沒有妥協(xié)的解決方案，比較方便的就是 json_model挥等，Flutter實(shí)戰(zhàn)作者寫的一個工具庫友绝，步驟也簡單：
- 在工程根目錄下創(chuàng)建一個名為 "jsons" 的目錄;
- 創(chuàng)建或拷貝Json文件到"jsons" 目錄中 ;
- 運(yùn)行
pub run json_model(Dart VM工程)orflutter packages pub run json_model(Flutter中) 命令生成Dart model類，生成的文件默認(rèn)在"lib/models"目錄下
狀態(tài)管理
Flutter 使用initState肝劲，setState方法設(shè)置widget狀態(tài)迁客，原理類似React。當(dāng)然這只是widget內(nèi)部控制狀態(tài)用的辞槐，跨組件通信還是需要其他方案的掷漱。官方推薦是使用Provider，使用下來中規(guī)中矩吧榄檬，當(dāng)然還可以使用大名鼎鼎的 Redux 以及 mbox卜范。不過Redux本身就以過多的樣板代碼而出名，寫React的時候就不喜歡用鹿榜，hooks 出來后就果斷就放棄Redux了海雪。hooks才是真香啊，Flutter什么時候才支持類似的函數(shù)式狀態(tài)管理方案呢舱殿？
總結(jié)
說了這么多奥裸，本質(zhì)就是為什么 Flutter 不向以 React 為代表的 web 生態(tài)看齊？更大的原因是Flutter的很多理念和開發(fā)模式其實(shí)遠(yuǎn)遠(yuǎn)落后于 React 沪袭。這也是為什么習(xí)慣 react/vue 的 web前端 對于Flutter 感覺很別扭不順手的原因了湾宙。
