---
tags: Flutter,React Native,framework
---
# Flutter vs React Native

都要安裝 Android Studio
但個人不推薦在 Android Studio 上寫 Code
理由:
1. 處理 conflit 時的邏輯不太一樣
在 Android Studio 上只會比較該行是否不同, 假如只是在code 中間加了一行, 下面整段 code 都會被視為不同, 操作介面也比較不友善
之前因為這樣在多人協作處理 conflit 時特別容易出錯, 覆蓋到別人的功能或是修改, 如果還是想使用 Android Studio, 建議處理 conflit 時還是使用 VSCode
2. Android Studio 蠻吃記憶體的, 官方建議至少 8G 以上, VSCode 則是 1G, 在電腦效能不足時可能會發生模擬器 reload 到一半整台電腦卡死的慘劇

## 跨平台框架的意義/優點:
1. 讓 web 開發人員能夠熟悉 APP 開發的橋樑, React Native 甚至可以直接使用 JavaScript 開發
2. 一碼多用, 無須掌握多種語言,無須維護好幾份程式碼,即可完成多個平台的應用程式, 也確保商業邏輯在多個平台上表現一致, 避免功能移植時因人為因素導致邏輯不一

### 缺點:
1. 版本升級不易---在使用了許多第三方套件後, 有些套件不支援新版框架, 而有些套件舊版存在 bug 必須升級, 但得同時升級框架, 這時另一個套件又不能升級, 相當矛盾
最近才發生的版本升級災難:
- 其中一個第三方套件(處理webview與螢幕截圖), 在 ios 上需要特定版本才相容, 但升級特定版本後, android sdk 也必須調整至 33 以上(此時必須保佑其他套件不會因此掛掉)

- 不小心升級 flutter 版本, 導致各種套件版本不相容

3. 效能一定不如原生APP程式碼, 如果有重度效能需求(動畫效果/遊戲/大量資料...), 原生 APP 依然是最優解
4. 雖然說一碼多用, 但測試時依然需要針對不同平台做測試

## Flutter 的優點:
1. 使用 Dart 開發, 作為一種強型別語言, 由於類型檢查和其他工具的支援，可以更容易地驗證程式碼的正確性, 維護時也能藉由型別檢查理解城市邏輯. 反之在 React Native 上, 你仍然能使用 Javascript 而不是 TypeScript, 這使得開發人員得更小心撰寫 JS 程式來彌補弱型別語言的不足

2. Flutter 使用 [skia](https://skia.org/) 圖形渲染器, 相較於 React native 需要額外的橋接 ios/Android 原生 UI 繪製介面, Flutter 應該會比 RN 快那麼一些, 但經過[實測](https://juejin.cn/post/6845166890524868615)發現, 由於現在的裝置機能都足夠強大, 似乎 Flutter 與 RN 在效能上已經平分秋色

## Flutter 的缺點:
1. 無法直接使用現有的 JavaScript/React 程式碼, 需要額外撰寫新的程式碼來移植 web 的功能
2. 無法直接 print 出物件內容, 在 js 中使用 console.log 可以直接檢視物件中的屬性與值, 但在 Dart 中只能得到 `Instance of XXX` 需要加入額外的方法或是使用 inspect + devtool

class Person {
  String name;
  int age;

  Person(this.name, this.age);

  @override
  String toString() {
    return 'Person{name: $name, age: $age}';
  }
}

void main() {
  var person = Person('John', 30);
  print(person); // Person{name: John, age: 30}
}

3. 實機測試運行相較 RN 之下非常不方便, RN 有強大的 Expo 在背後撐腰, 只要掃一下 QR code 即可運行程式在你的手機, 無須佔你一個USB 插槽, 或是度過 ios 的重重 APP 安裝限制[see apple official doc](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device/) 只為了測試一個按鈕是否正常運作

4. Flutter 暫時不打算支援 Code push
[Code Push / Hot Update / out of band updates](https://github.com/flutter/flutter/issues/14330#issuecomment-485565194)
[翻譯翻譯](https://blog.csdn.net/m0_66264938/article/details/122722247)

但還是有一些第三方的解決方案:
App Center [(沒有正式支援 Flutter)](https://github.com/microsoft/appcenter/tree/master/sample-build-scripts/flutter)
Firebase Remote Config
[Codemagic](https://docs.codemagic.io/getting-started/about-codemagic/)