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