目前跨端開發比較熱門的就是 React Native 和 Flutter 了，到底該選哪門技術似乎也快成了大前端圈的一個熱門話題。對於web前端來說，基於web生態的 React Native 應該是一個更加順暢而自然的選擇；但 Flutter 讓人動心的地方就是高性能和 跨端UI一致性。而Reac ...
目前跨端開發比較熱門的就是 React Native 和 Flutter 了，到底該選哪門技術似乎也快成了大前端圈的一個熱門話題。對於web前端來說，基於web生態的 React Native 應該是一個更加順暢而自然的選擇；但 Flutter 讓人動心的地方就是高性能和 跨端UI一致性。而React Native 發展不太明朗和 Flutter 越發成熟的走勢對比促使我從觀望的心態轉為加入 Flutter。
這裡主要就是記錄一下學習Flutter的一些感想和看法：
- 包管理
- 佈局和樣式
- json
- 狀態管理
包管理
pubspec.yaml 文件的作用類似於 npm 的 package.json ，而yaml格式也比json方便。但是不能用命令行自動安裝包卻讓習慣了npm的我覺得麻煩。因為Flutter 安裝依賴包是這麼一個流程：
- 打開pub.dev網站；
- 搜索需要的包，得到包的名稱和版本；
- 把包名稱和版本填入
pubspec.yaml，最後才開始下載包。
我覺得應該直接命令行安裝包，讓它幫我們下載，名稱版本自動寫入pubspec.yaml。如果沒有指定版本就是預設下載最新版本，因為很多時候我們並不想知道版本號，給我個能用的最新的版本號就ok了。
佈局和樣式
就和很多人想的一樣，為什麼不使用 jsx 或者 xml 格式進行佈局，因為基於代碼的方式看起來太不直觀了，之所以這樣聽說主要是能更方便的和Dart的hot reload特性配合使用，代碼改動能立刻反映佈局變化。但我還是期待有適配轉化 DSL 的框架出現。
Flutter一切都是widget，但是連很多屬性都當成widget 這就讓人有些看不明白了，比如 Center，Align，Padding，為什麼不把常用的樣式屬性都加入到佈局組件裡面呢？這導致出現了這麼一種情況：嵌套嚴重，一個很簡單的功能需要層層嵌套才能實現，而且樣式也不能方便的復用。目前比較合理的建議就是適當抽取出子組件減少嵌套。
Json
Dart 作為強類型的語言，一切皆是對象。Dart要方便操作json就得把json轉化為對象，這就意味著每用到一個json，就需要定義一個對應的類，這也是強類型語言的通病了。這絕對讓人很懷念 js/ts 這種對json操作非常自然順暢的弱類型/函數式語言。當然也不是沒有妥協的解決方案，比較方便的就是 json_model，Flutter實戰作者寫的一個工具庫，步驟也簡單：
- 在工程根目錄下創建一個名為 "jsons" 的目錄;
- 創建或拷貝Json文件到"jsons" 目錄中 ;
- 運行
pub run json_model(Dart VM工程)orflutter packages pub run json_model(Flutter中) 命令生成Dart model類，生成的文件預設在"lib/models"目錄下
狀態管理
Flutter 使用initState，setState方法設置widget狀態，原理類似React。當然這隻是widget內部控制狀態用的，跨組件通信還是需要其他方案的。官方推薦是使用Provider，使用下來中規中矩吧，當然還可以使用大名鼎鼎的 Redux 以及 mbox。不過Redux本身就以過多的樣板代碼而出名，寫React的時候就不喜歡用，hooks 出來後就果斷就放棄Redux了。hooks才是真香啊，Flutter什麼時候才支持類似的函數式狀態管理方案呢？
總結
說了這麼多，本質就是為什麼 Flutter 不向以 React 為代表的 web 生態看齊？更大的原因是Flutter的很多理念和開發模式其實遠遠落後於 React 。這也是為什麼習慣 react/vue 的 web前端 對於Flutter 感覺很彆扭不順手的原因了。
