整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
目：在APP的開發過程中，我們經常會聽到說“這個頁面用Native做，那個頁面用H5做……”那么這兩者有什么區別呢，產品設計時又需要注意些什么？
考核點
面試App產品的時候，可能會問到。考察面試者的基本功
答題思路
技巧：分類分點回答即可
思路：從開發成本、性能、版本發布、流量等角度來闡述
答題模板
1??兩種頁面簡單解釋
Native（原生頁面）：是我們傳統意義上的軟件，使用我們大家熟悉的iOS和Android系統框架語言編寫。
H5：用瀏覽器中的Html語言框架進行開發，相當于網頁。
2??開發成本的區別
Native開發成本高：需要針對iOS和Android平臺分別開發適配
H5開發成本低：跨平臺，相對Native，H5開發成本低。
3??性能的區別
Native頁面運行速度快，比較流暢。
H5頁面相對Native的運行性能低，特別是一些動畫效果有明顯卡頓。
4??版本發布的區別
Native頁面的修改要重新發布，重新審核，周期長。iOS應用市場審核難度高，Android應用市場又比較多。
H5頁面的修改 可以隨時上線，不用等待審核
5??流量使用的區別
H5比Native更費流量，H5除了加載html還要加載js、css這些資源文件，相比Native網絡加載速度慢。
6??其他
Native能很好的使用設備底層功能，如攝像頭、方向傳感器、重力傳感器等。
H5有所限制。比如Android里的H5對攝像頭和方向傳感器就需要再多做一些處理。再比如不想用系統默認的手機相冊樣式，就要用原生來開發了。
7??產品設計注意點
核心框架結構最好用Native開發
需要頻繁切換的頁面最好用Native開發，因為H5存在加載進度條。如果使用H5開發，用戶在頻繁切換的過程中，會不停地等待加載，體驗較差。
Native頁面可以做出流暢的轉場動效，利用好這一點以提升APP的交互感受。
活動頁等臨時性強，變化快的頁面，最好用H5開發，更新速度快，成本低。
采用H5開發時，產品設計上盡量減少對系統組件的調用。
H5頁面上盡量減少圖片，并且嚴格控制圖片大小，開發時需要采用異步加載等策略。
需要pmp學習資料的可以找我要
們看一下React Native和React.js，它們的架構，使用和編碼樣式重疊和不同。請繼續閱讀！
React是Facebook，Instagram和知名開發人員社區的支持者，是目前使用最多的JavaScript庫之一。根據Libscore的說法，目前React正在許多知名網站上使用，例如Netflix，Airbnb，Walmart，HelloSign和Imgur，僅舉幾例。
React.js開發與React本機移動應用程序開發沒有任何相似之處，它們都有不同的用途。該博客將解釋這兩個PL之間的所有主要差異，并將為您提供一種方法來為您的特定項目選擇一個。
React.js和React Native之間的區別
React.js是一個JavaScript庫，而React Native是一個移動應用程序開發框架
React.js是一個JavaScript庫，可幫助企業創建漂亮的用戶界面。React.js的一個主要特性是它可以在客戶端執行，此外，它可以在服務器端呈現，并且它們可以一起工作，可以互操作。它廣泛用于構建高性能Web應用程序和UI。
但是，React Native是一個移動應用程序開發框架，使用React.js構建移動應用程序。它允許您從聲明性組件構建豐富的移動用戶界面。React Native移動應用程序開發提供了Hot Reloading等功能，可以更快地開發應用程序，并且工作量更少。2015年，Facebook發布了React Native庫，將React架構提供給原生的Android，iOS和Windows應用程序。
兩者都以不同的方式提高開發人員的效率
React.js專注于為其組件提供出色的性能以及完全管理的渲染周期，從而提高開發人員的效率。通過以更簡單的方式設置可重用部件的分發，創建和利用，它使開發人員有更多機會利用和進行基本抽象。它被證明對于可點擊按鈕等較低級別的部件以及下拉列表等較高級別的部件非常有用。
React Native提供了相同的好處，但采用了不同的方法。React Native中的構建塊是可重用的本機組件，可直接編譯為本機。使用React，您在Android或iOS中使用的組件在React中具有相應的組件，因此您將獲得相同的外觀和感覺。這種基于組件的結構使您可以更快地創建應用程序。該應用程序將具有本機移動應用程序的外觀，速度和功能，這使得React Native與其他移動應用程序開發框架不同。
React.js利用虛擬DOM，而React Native使用本機API
React.js利用虛擬DOM創建更好的用戶體驗。DOM構造需要時間，因為DOM樹今天很大。但是，React.js通過利用虛擬DOM設法更快地執行此過程。因此，React.js利用文檔對象模型的抽象副本，并將更改推廣到一個組件，而不會影響UI的其余部分。這使得React.js在快速更新和創建動態UI方面非常棒。
React Native更進了一步。它利用本機API呈現可在iOS和Android平臺上重用的UI部件。所以它真正做的是它利用Java API來呈現Android組件和Objective-C API來編寫iOS組件。然后它利用JavaScript組成代碼的剩余部分，為每個平臺個性化應用程序。這為React Native移動應用程序提供了最大的組件可重用性和代碼共享性。
React.js改進了你的Web應用程序的SEO，而React Native則是關于UI的
React.js的設計考慮了搜索引擎優化。它利用Node在用戶的服務器上進行渲染。類似的工具確實提供了這種服務器的渲染觀點，但是，它們需要大量不穩定的黑客攻擊和大量的開發人員支持來維護。
另一方面，由于React Native不用于網站，它與SEO無關。它專注于構建移動UI。與其他移動應用程序開發框架相比，React Native完全以UI為中心，使其更像是一個JavaScript庫而不是一個框架。由此產生的UI非常敏感。這意味著應用程序將比普通混合應用程序具有更快的加載時間，并且具有更平滑的感覺。
React.js結合了技術，而React Native的代碼可以與任何現有的應用程序結合使用
React使用HTML和JS遵循它們一直聚集在一起的規則。這個想法更加突出，包括CSS，它解決了CSS開發中發現的一系列問題，例如全球命名空間和變量/范圍隔離。
另一方面，React Native為希望向現有應用添加更多但不想更改整個應用程序代碼的企業提供了機會。您可以將React Native組件添加到現有應用程序的代碼中。或者，如果您當前的混合應用程序是使用Ionic和Cordova制作的，請使用插件有效地重用基于Cordova的代碼。
此外，React.js使用HTML和CSS，而React Native則不使用。React.js使用和，而React Native分別使用和。這是一個顯示相同的示例：
對于React.js：
function tick() {
const element = (
<div>
<p>Hello, world!</p>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
對于React Native：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
導航：React.js和React Native的不同方法
這是一個角度，他們兩個采用不同的方法，但結果相當頸部和頸部。React.js中的Web應用程序利用React-router進行導航，而React Native則有一個完全獨特的庫導航器。
021 年，跨平臺程序員之間關于 React Native 和 Flutter 的曠日持久的爭論越來越白熱化了。前幾年，React Native 還是開發人員的首選框架，但是自 2017 年 Flutter 發布以來，其已經發展成為 React Native 的一個強有力競爭對手。
最近，隨著許多初創公司選擇了 Flutter 用于 MVP 開發，React Native 正在面臨來自 Flutter 的激烈競爭。那么問題來了，哪種應用開發技術將在 2021 年取得成功呢？
1. 熱重載 = 快速編碼
Flutter 允許開發人員使用一種更復雜、更快速的方式來創建應用程序。這是 Flutter 的最大優勢之一，也是所有頂級移動應用開發公司都頗為看重的。
開發人員可以實時對代碼庫做出改進，并立刻看到這些改進反映在請求中。這就是所謂的“熱重載”特性，更改通常只需幾毫秒就能顯示出來。
這一功能讓團隊可以快速添加功能、修復錯誤和測試新想法。此外，當團隊需要通過協作來加快開發速度時，熱重載用起來非常順手。
2. 適用于多個移動平臺的單一代碼庫
Flutter 允許開發人員為兩個應用只編寫一個代碼庫——一個針對 iOS，另一個針對 Android。因為 Flutter 具有自己的模板和布局，它的操作系統無關的平臺意味著開發人員可以在兩個不同的系統上使用相同的功能，同時保持每個應用都有自己獨特的樣式、可用性和功能。
Flutter for Web 是由谷歌開發的，為開發人員提供了必要的信譽保障。一旦應用程序上線，就可以用單個代碼庫支持 Android、iOS 和 Web 平臺。
3. 與 React Native 相比，需要的測試只有一半
由于你將在兩個平臺上測試相同的程序，因此質量保證流程做起來會快得多。我們編寫了的自動化測試量只有一半，因為在兩個平臺上可以編寫相同的測試，這樣就最大程度地減少了質量檢查團隊的工作量。
但是，由于你的質量檢查專家必須手動檢查每臺設備上的應用，因此需要進行與原生編程相似級別的手動測試。
1. 快速刷新 = 快速編碼
它具有與 Flutter 相同的特性。熱重載加快了開發過程，并允許程序員將新代碼直接插入正在運行的應用程序中。這樣開發人員無需重新構建應用程序即可立刻看到改進。
熱重載可以保留應用程序的狀態，并避免了在完全重載期間丟失它的風險（就基于狀態的框架而言，這是一大優勢）——這進一步加快了移動應用程序成長的速度。
2. 一個代碼庫，兩個移動平臺（甚至更多！）
就像 Flutter 一樣，你只需編寫一個代碼庫即可運行兩個應用程序，一個跑在 Android 上，一個運行在 iOS 上。更好的一點是，因為用的是 JavaScript，所以你在開發跨平臺應用程序時可以和 Web 應用共享代碼。你只需使用可對特定平臺編譯的抽象模塊即可。
請參閱以下示例，了解可讓你同時在 iOS 和 Android 及其他系統（包括 Web 和桌面應用）上編程的庫：
React Native for Web 是一個跨平臺應用，支持 Android、iOS 和 Web（Twitter 使用它來創建 Twitter Lite）。
ReactXp——Skype 開發的一個應用，支持 Android、iOS、互聯網和 Windows 10（UWP）。
微軟團隊為所有 Windows 10 用戶（PC、平板電腦、二合一、Xbox、混合現實設備等）創建了 React-native-windows。
React Native 程序員對事物的看法和采取的行動與大多數人是不同的。
你可以假設 Web 桌面應用、移動 Web 應用和原生應用都具有相同的業務邏輯，但是它們需要不同的 UI 才能滿足不同的用戶需求。
3. 它使用了流行的編程語言——JavaScript
React Native 使用的是 JavaScript 這種常用的編程語言，而 Dart 尚不為人所知。如果你是喜歡統計數據的開發人員，也可以使用 TypeScript（一個 JavaScript 的超集）。
4. 開發者的選擇自由
開發人員可以使用 React Native 開發跨平臺應用程序。
優勢在于，React Native 允許你根據項目需求和開發人員的偏好來精確選擇要使用的解決方案。
例如，如果開發人員需要處理全局狀態（如何在單個應用程序中存儲和管理多個組件使用的數據），則他們可以使用自定義用戶界面庫或編寫自己的用戶界面庫；他們可以使用庫路由器，或在 JavaScript 和 TypeScript 做出選擇。
對很多人來說，Flutter 比 React Native 更難學習。React Native 在開發人員中很流行，因為它使用了 JavaScript 這種著名的編程語言。因此，如果你是 Dart 的新手，學習 Flutter 的時間可能比學習 React Native 的時間更長。但反之亦然：如果你以前曾用過 Dart，那么學習 Flutter 將會很容易。
由于 React Native 中的組件非常簡單，因此設置它們的樣式時你必須付出很多工作。只有少數幾個模塊可以識別平臺，并且幾乎都需要為 iOS 和 Android 應用不同的特性，或者設置不同的樣式。
另一方面，Flutter 將組件視為小部件，此外，這些小部件基于 Material Design，所以可以高度自定義。大多數小部件都是自適應的，這意味著它們可以同時在 Android 和 iOS 上使用。
Flutter 在性能方面具有優勢，因為它可以編譯為 ARM 或 x86 原生資源，因此非常快。
React Native 只是原生方法的包裝，也就是說它架起了一座橋梁，將某些調用轉換為原生 API；當存在許多原生調用時，這就會成為瓶頸。
React Native 沒有轉換為原生代碼，它還有 JavaScript 層，而渲染這些代碼的性能要比 Flutter 低。這里有一些解決方法，但是 Flutter 就用不著操心這些，因為視圖層就像游戲一樣簡單——而且，由于 Flutter 工程師構建了所有組件，因此對橋梁的原生調用更少，因為它們只是原生視圖的包裝。
使用 React Native 組件將無法獲得足夠的自定義能力。因此，如果有人選擇不包裝一個進程，就無法使用它（例如，視圖周圍的虛線框將不起作用）——并且來自谷歌和蘋果的新組件需要很長時間才能出現在 React Native 中。
React 的 bug 修補也開始需要更長的時間。例如邊界破裂問題，以及支持不同風味的問題，等等。大多數 React Native 公司正在制作定制的分叉來修復上游未修補的 bug。Flutter 開發人員更加謹慎，修復往往很快。到最后你可能把大部分時間花在 React Native 文檔中，查找各種問題，試圖找出事情沒有按預期進行的原因。
我們希望本文中的信息能幫助你確定以下問題的答案：“Flutter 還是 React Native，哪個更好？”就一般共識而言，谷歌的 flutter 將繼續作為 SDK 存在，并且可能在未來幾年內取代 React Native 的地位。如果在未來技術的重要性變得更大，那么在選擇最佳解決方案的同時緊跟趨勢是非常重要的。
原文鏈接：
https://hackernoon.com/flutter-vs-react-native-what-to-choose-in-2021-ik1n35ta?source=rss
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
