2021年，Flutter 與 React Native該如何選擇？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2021 年，跨平臺程序員之間關於 React Native 和 Flutter 的曠日持久的爭論越來越白熱化了。前幾年，React Native 還是開發人員的首選框架，但是自 2017 年 Flutter 發佈以來，其已經發展成爲 React Native 的一個強有力競爭對手。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最近，隨着許多初創公司選擇了 Flutter 用於 MVP 開發，React Native 正在面臨來自 Flutter 的激烈競爭。那麼問題來了，哪種應用開發技術將在 2021 年取得成功呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/46\/463102e61e712973021a52e8977788ef.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Flutter 應用的優勢"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1. 熱重載 = 快速編碼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 允許開發人員使用一種更復雜、更快速的方式來創建應用程序。這是 Flutter 的最大優勢之一，也是所有頂級移動應用開發公司都頗爲看重的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發人員可以實時對代碼庫做出改進，並立刻看到這些改進反映在請求中。這就是所謂的“熱重載”特性，更改通常只需幾毫秒就能顯示出來。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一功能讓團隊可以快速添加功能、修復錯誤和測試新想法。此外，當團隊需要通過協作來加快開發速度時，熱重載用起來非常順手。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2. 適用於多個移動平臺的單一代碼庫"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 允許開發人員爲兩個應用只編寫一個代碼庫——一個針對 iOS，另一個針對 Android。因爲 Flutter 具有自己的模板和佈局，它的操作系統無關的平臺意味着開發人員可以在兩個不同的系統上使用相同的功能，同時保持每個應用都有自己獨特的樣式、可用性和功能。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter for Web 是由谷歌開發的，爲開發人員提供了必要的信譽保障。一旦應用程序上線，就可以用單個代碼庫支持 Android、iOS 和 Web 平臺。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"3. 與 React Native 相比，需要的測試只有一半"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於你將在兩個平臺上測試相同的程序，因此質量保證流程做起來會快得多。我們編寫了的自動化測試量只有一半，因爲在兩個平臺上可以編寫相同的測試，這樣就最大程度地減少了質量檢查團隊的工作量。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是，由於你的質量檢查專家必須手動檢查每臺設備上的應用，因此需要進行與原生編程相似級別的手動測試。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"爲什麼有人會更喜歡 React Native 而不是 Flutter？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1. 快速刷新 = 快速編碼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它具有與 Flutter 相同的特性。熱重載加快了開發過程，並允許程序員將新代碼直接插入正在運行的應用程序中。這樣開發人員無需重新構建應用程序即可立刻看到改進。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"熱重載可以保留應用程序的狀態，並避免了在完全重載期間丟失它的風險（就基於狀態的框架而言，這是一大優勢）——這進一步加快了移動應用程序成長的速度。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2. 一個代碼庫，兩個移動平臺（甚至更多！）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"就像 Flutter 一樣，你只需編寫一個代碼庫即可運行兩個應用程序，一個跑在 Android 上，一個運行在 iOS 上。更好的一點是，因爲用的是 JavaScript，所以你在開發跨平臺應用程序時可以和 Web 應用共享代碼。你只需使用可對特定平臺編譯的抽象模塊即可。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"請參閱以下示例，瞭解可讓你同時在 iOS 和 Android 及其他系統（包括 Web 和桌面應用）上編程的庫："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React Native for Web 是一個跨平臺應用，支持 Android、iOS 和 Web（Twitter 使用它來創建 Twitter Lite）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ReactXp——Skype 開發的一個應用，支持 Android、iOS、互聯網和 Windows 10（UWP）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"微軟團隊爲所有 Windows 10 用戶（PC、平板電腦、二合一、Xbox、混合現實設備等）創建了 React-native-windows。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React Native 程序員對事物的看法和採取的行動與大多數人是不同的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你可以假設 Web 桌面應用、移動 Web 應用和原生應用都具有相同的業務邏輯，但是它們需要不同的 UI 才能滿足不同的用戶需求。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"3. 它使用了流行的編程語言——JavaScript"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React Native 使用的是 JavaScript 這種常用的編程語言，而 Dart 尚不爲人所知。如果你是喜歡統計數據的開發人員，也可以使用 TypeScript（一個 JavaScript 的超集）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"4. 開發者的選擇自由"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發人員可以使用 React Native 開發跨平臺應用程序。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優勢在於，React Native 允許你根據項目需求和開發人員的偏好來精確選擇要使用的解決方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"例如，如果開發人員需要處理全局狀態（如何在單個應用程序中存儲和管理多個組件使用的數據），則他們可以使用自定義用戶界面庫或編寫自己的用戶界面庫；他們可以使用庫路由器，或在 JavaScript 和 TypeScript 做出選擇。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"選擇一種框架之前要考慮的事情"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對很多人來說，Flutter 比 React Native 更難學習。React Native 在開發人員中很流行，因爲它使用了 JavaScript 這種著名的編程語言。因此，如果你是 Dart 的新手，學習 Flutter 的時間可能比學習 React Native 的時間更長。但反之亦然：如果你以前曾用過 Dart，那麼學習 Flutter 將會很容易。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於 React Native 中的組件非常簡單，因此設置它們的樣式時你必須付出很多工作。只有少數幾個模塊可以識別平臺，並且幾乎都需要爲 iOS 和 Android 應用不同的特性，或者設置不同的樣式。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另一方面，Flutter 將組件視爲小部件，此外，這些小部件基於 Material Design，所以可以高度自定義。大多數小部件都是自適應的，這意味着它們可以同時在 Android 和 iOS 上使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 在性能方面具有優勢，因爲它可以編譯爲 ARM 或 x86 原生資源，因此非常快。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React Native 只是原生方法的包裝，也就是說它架起了一座橋樑，將某些調用轉換爲原生 API；當存在許多原生調用時，這就會成爲瓶頸。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React Native 沒有轉換爲原生代碼，它還有 JavaScript 層，而渲染這些代碼的性能要比 Flutter 低。這裏有一些解決方法，但是 Flutter 就用不着操心這些，因爲視圖層就像遊戲一樣簡單——而且，由於 Flutter 工程師構建了所有組件，因此對橋樑的原生調用更少，因爲它們只是原生視圖的包裝。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 React Native 組件將無法獲得足夠的自定義能力。因此，如果有人選擇不包裝一個進程，就無法使用它（例如，視圖周圍的虛線框將不起作用）——並且來自谷歌和蘋果的新組件需要很長時間才能出現在 React Native 中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React 的 bug 修補也開始需要更長的時間。例如邊界破裂問題，以及支持不同風味的問題，等等。大多數 React Native 公司正在製作定製的分叉來修復上游未修補的 bug。Flutter 開發人員更加謹慎，修復往往很快。到最後你可能把大部分時間花在 React Native 文檔中，查找各種問題，試圖找出事情沒有按預期進行的原因。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們希望本文中的信息能幫助你確定以下問題的答案：“Flutter 還是 React Native，哪個更好？”就一般共識而言，谷歌的 flutter 將繼續作爲 SDK 存在，並且可能在未來幾年內取代 React Native 的地位。如果在未來技術的重要性變得更大，那麼在選擇最佳解決方案的同時緊跟趨勢是非常重要的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文鏈接："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/hackernoon.com\/flutter-vs-react-native-what-to-choose-in-2021-ik1n35ta?source=rss","title":"","type":null},"content":[{"type":"text","text":"https:\/\/hackernoon.com\/flutter-vs-react-native-what-to-choose-in-2021-ik1n35ta?source=rss"}]}]}]}