什么是React Native？在移動(dòng)應(yīng)用程序開發(fā)中何時(shí)值得使用React Native？

導(dǎo)言

越來越多的人再也無法想象沒有智能手機(jī)、平板電腦和可穿戴設(shè)備的生活了。這一點(diǎn)對(duì)于智能手機(jī)來說尤其如此，因?yàn)橹悄苁謾C(jī)的滲透率每年都在上升。我們使用移動(dòng)設(shè)備支付賬單、安排醫(yī)療預(yù)約或訂購食物。在過去的10年里，移動(dòng)設(shè)備在互聯(lián)網(wǎng)瀏覽中所占的比例從1.56%（2010年1月）上升到51.5%（2020年9月）。

難怪許多網(wǎng)站所有者決定創(chuàng)建兩個(gè)版本的網(wǎng)站，一個(gè)用于寬屏個(gè)人電腦，另一個(gè)用于窄屏移動(dòng)設(shè)備。他們這樣做是為了確保為他們的用戶提供最好的體驗(yàn)。

這個(gè)解決方案是有問題的，從維護(hù)兩個(gè)應(yīng)用程序和搜索引擎優(yōu)化問題到檢測(cè)設(shè)備是智能手機(jī)還是個(gè)人電腦都有問題。這就是為什么我們提出了一個(gè)更好的解決方案：一個(gè)適應(yīng)顯示設(shè)備的響應(yīng)性網(wǎng)頁設(shè)計(jì)。因此，您只需要一個(gè)代碼就可以操作這兩個(gè)平臺(tái)，使網(wǎng)站在任何屏幕上看起來都很好。

在移動(dòng)應(yīng)用程序開發(fā)過程中也會(huì)出現(xiàn)類似的問題。許多應(yīng)用程序是基于非標(biāo)準(zhǔn)外觀（與公司的brandbook和其他客戶要求兼容）創(chuàng)建的，同時(shí)在iOS和Android等平臺(tái)上保持相同的設(shè)計(jì)（平臺(tái)要求有細(xì)微差別）。

在許多情況下，各個(gè)平臺(tái)的開發(fā)人員通過使用給定平臺(tái)的本地語言編寫相同的功能（登錄、注冊(cè)、向籃子中添加產(chǎn)品等）來重復(fù)他們的工作。這對(duì)開發(fā)應(yīng)用程序的成本有很大影響。

多年來，許多公司和開發(fā)商都試圖解決這個(gè)問題。

什么是混合應(yīng)用程序？

這個(gè)問題的一個(gè)解決方案是創(chuàng)建一個(gè)混合應(yīng)用程序。這種應(yīng)用程序的基礎(chǔ)是一個(gè)可以使用任何前端庫（如ReactJS、Angular或JQuery）制作的web應(yīng)用程序。

下一步是使用apachecordova框架構(gòu)建一個(gè)移動(dòng)應(yīng)用程序，該框架將ready應(yīng)用程序放在WebView（iOS/Android上用于顯示網(wǎng)站的本地組件）中。Cordova還提供了允許混合應(yīng)用程序使用本地功能（如藍(lán)牙、地理位置和電池）的解決方案。

這種方法允許創(chuàng)建一個(gè)應(yīng)用程序（每個(gè)平臺(tái)上使用一個(gè)代碼），而無需使用給定平臺(tái)的本機(jī)編程語言并保持平臺(tái)之間的一致性。更重要的是，我們還可以將這樣的應(yīng)用程序用作web應(yīng)用程序。

混合解決方案并非沒有缺點(diǎn)：

• 在編寫混合應(yīng)用程序時(shí)，我們需要花費(fèi)更多的時(shí)間來創(chuàng)建與本機(jī)應(yīng)用程序兼容的用戶體驗(yàn)（這通常很困難，歸根結(jié)底是模仿本機(jī)的印象）。

• 另一個(gè)缺點(diǎn)是應(yīng)用程序的性能，它依賴于web呈現(xiàn)引擎，這可能成為應(yīng)用程序的瓶頸。

• 同樣值得注意的是，由于混合應(yīng)用程序作為web應(yīng)用程序運(yùn)行，您可能會(huì)看到這類應(yīng)用程序的典型問題（其背后的原因是每個(gè)平臺(tái)上各個(gè)渲染引擎的操作不一致）。

近年來，我們目睹了混合應(yīng)用的普及率下降，轉(zhuǎn)而支持跨平臺(tái)應(yīng)用?；谶@個(gè)解決方案的庫的例子有PhoneGap和Ionic。您可以在這里進(jìn)一步了解混合應(yīng)用程序和跨平臺(tái)應(yīng)用程序的比較。

什么是跨平臺(tái)應(yīng)用程序？

最新的解決方案是跨平臺(tái)技術(shù)，它允許使用給定技術(shù)提供的組件以一種語言編寫代碼，然后為多個(gè)平臺(tái)構(gòu)建應(yīng)用程序。就像在混合應(yīng)用程序中一樣，由于這種方法，我們編寫了一個(gè)代碼，然后用它為我們感興趣的平臺(tái)構(gòu)建應(yīng)用程序。特定的框架在實(shí)現(xiàn)細(xì)節(jié)上有所不同，但它們都使用特定平臺(tái)的本機(jī)代碼。

有鑒于此，跨平臺(tái)應(yīng)用程序可以獲得比混合應(yīng)用程序更好的性能（在大多數(shù)情況下，甚至與本機(jī)應(yīng)用程序類似）。他們提供的用戶體驗(yàn)與使用給定平臺(tái)的本地語言類似或相同。

在您現(xiàn)在正在閱讀的這一系列文章中，我們將詳細(xì)介紹React Native。

什么是React Native？

React Native是一個(gè)由Facebook工程師基于ReactJS構(gòu)建的框架（我在這里更詳細(xì)地描述ReactJS和React Native之間的連接）。它允許您使用流行的JavaScript（TypeScript）語言編寫一次代碼，并為Android和iOS創(chuàng)建一個(gè)移動(dòng)應(yīng)用程序。

Facebook在其許多應(yīng)用程序中使用React Native，包括Facebook移動(dòng)應(yīng)用程序（例如，Marketplace功能是使用React Native創(chuàng)建的）和Instagram。所以，你可以確定這個(gè)框架是高質(zhì)量的，并且實(shí)際上保證了Facebook團(tuán)隊(duì)未來的支持。

使用React Native的最流行應(yīng)用程序

除了Instagram和Facebook移動(dòng)應(yīng)用程序中的Marketplace功能外，React Native還用于應(yīng)用程序中。

值得強(qiáng)調(diào)的是，并非所有這些應(yīng)用程序都是100%使用React Native創(chuàng)建的。該框架允許與現(xiàn)成的本地應(yīng)用程序集成，這是上述許多項(xiàng)目都從中受益的事實(shí)。

最近，微軟也對(duì)這項(xiàng)技術(shù)表現(xiàn)出了興趣，它的開發(fā)者已經(jīng)發(fā)布了React原生XP庫?；赗eact Native，該工具允許您為iOS、Android、Web和Windows 10–UWP創(chuàng)建應(yīng)用程序。

更重要的是，創(chuàng)建單個(gè)微軟產(chǎn)品的團(tuán)隊(duì)正在試驗(yàn)這種技術(shù)。例如，新的Skype應(yīng)用程序在React Native中實(shí)現(xiàn)了一段時(shí)間（然后這項(xiàng)技術(shù)被Electron庫取代），而最新版本的Xbox PC應(yīng)用程序則從Electron重寫為React Native。

簡(jiǎn)而言之，React Native的歷史

我們知道React Native是什么，但現(xiàn)在讓我們看看它的歷史。React Native是2013年夏天Facebook內(nèi)部hackathon的成果。2015年1月，F(xiàn)acebook發(fā)布了React Native的預(yù)覽版，在5月的一次會(huì)議上，F(xiàn)acebook宣布正式啟動(dòng)該框架，并將其作為一個(gè)開源項(xiàng)目向社區(qū)發(fā)布。最初，React Native只支持iOS平臺(tái)，但在2015年9月，它還獲得了對(duì)Android的支持。

近年來，F(xiàn)acebook的工程師們一直致力于提高框架的性能、新的體系結(jié)構(gòu)和縮小應(yīng)用程序的規(guī)模。

React（ReactJS）和React Native有什么區(qū)別？

2013年由Facebook發(fā)布的React（也稱為ReactJS；為了清晰起見，我將繼續(xù)以這個(gè)名稱引用它）是一個(gè)為web應(yīng)用程序設(shè)計(jì)的庫。它是用于創(chuàng)建Facebook web應(yīng)用程序的主要框架。ReactJS的主要作用是根據(jù)當(dāng)前配置（提供的數(shù)據(jù)）顯示頁面的各個(gè)組件/小部件。

由于ReactJS的簡(jiǎn)單性和聲明性（意味著開發(fā)人員聲明了他們想要實(shí)現(xiàn)的目標(biāo)，并且一個(gè)給定的組件負(fù)責(zé)實(shí)現(xiàn)這個(gè)效果），ReactJS已經(jīng)獲得了認(rèn)可和流行——它是3個(gè)最流行的用于快速有效地編寫web應(yīng)用程序的庫之一，僅次于Angular和Vue。

為了更好地說明ReactJS聲明性特性的好處，讓我們分析以下創(chuàng)建（WelcomeDialog）組件的代碼：

1    <WelcomeDialog show={true} title=”Hello Reader” />

ReactJS提出的應(yīng)用程序（架構(gòu)/假設(shè)等）的思維方式是如此普遍，以至于它的弟弟ReactNative也使用了這種思維方式。即使是非技術(shù)人員也很容易理解，這樣一段代碼應(yīng)該顯示一個(gè)對(duì)話框（show屬性為true），其標(biāo)題將是文本Hello Reader（title屬性設(shè)置為Hello Reader）。

React Native使用ReactJS的機(jī)制，符合“一次學(xué)習(xí)，到處寫”的原則，同級(jí)之間的主要區(qū)別是正在構(gòu)建的應(yīng)用程序的類型。正如我前面提到的，ReactJS專注于web應(yīng)用程序，因此我們?cè)谀抢锸褂肏TML、CSS，當(dāng)然還有JavaScript。不過，由于React Native，我們可以同時(shí)為多個(gè)平臺(tái)構(gòu)建應(yīng)用程序。

是什么讓React Native獨(dú)一無二？

以下是React Native的最大優(yōu)點(diǎn)（依我看）：

• 該框架基于當(dāng)前最流行的語言之一-JavaScript（源代碼）。因此，React Native開發(fā)人員可以訪問在React Native應(yīng)用程序中工作的許多外部庫（day.js，lodash）。此外，這是書面ReactJS又考慮工作，許多圖書館本地做出反應(yīng)（例如，F(xiàn)ormik，終極版，victory.js我AWS AMPLIFY）。

• 可以將React Native與現(xiàn)有的移動(dòng)應(yīng)用程序集成在一起，因此，我們可以繼續(xù)使用React Native開發(fā)現(xiàn)有的應(yīng)用程序。而且，即使在設(shè)計(jì)移動(dòng)應(yīng)用程序的階段，我們也可以區(qū)分值得在React Native中編寫的視圖/功能（例如，用戶配置文件，登錄名）和對(duì)速度至關(guān)重要的視圖/功能，因此應(yīng)使用native來實(shí)現(xiàn)。

• “學(xué)習(xí)一次，隨處編寫”使任何了解ReactJS的人都可以輕松地快速進(jìn)入React Native項(xiàng)目。通過Web版本獲得的知識(shí)和經(jīng)驗(yàn)可以以幾乎1：1的比例翻譯成React Native。

• React Native還允許您為給定平臺(tái)編寫代碼片段（例如，如果我們希望有一個(gè)符合給定平臺(tái)標(biāo)準(zhǔn)的菜單，我們可以為每個(gè)平臺(tái)分別編寫這個(gè)元素）。

• 創(chuàng)建自己的本機(jī)代碼的能力，可以與我們的JavaScript代碼通信。這有助于與不受支持的平臺(tái)的API進(jìn)行通信，或者當(dāng)我們希望與現(xiàn)成的解決方案集成時(shí)進(jìn)行通信。

• 該框架的另一個(gè)優(yōu)點(diǎn)是其體系結(jié)構(gòu)側(cè)重于添加新的平臺(tái)。由于這一點(diǎn)以及社區(qū)的支持，React Native還支持Windows、macOS等平臺(tái)，并提供了編寫web應(yīng)用程序的可能性。

• Expo框架也值得一提。它為創(chuàng)建一個(gè)典型的移動(dòng)應(yīng)用程序提供了許多有用的組件，例如，訪問文本消息、聯(lián)系人、相機(jī)或通過社交媒體登錄，從而顯著改進(jìn)了React Native的工作。

React如何工作？

React Native的主要任務(wù)是提供組件，然后將這些組件轉(zhuǎn)換（映射）為給定平臺(tái)上的本地等效組件。這就是它如何維護(hù)給定平臺(tái)的用戶體驗(yàn)。

因此，框架有它自己的特殊組件（例如，按鈕、模式、文本輸入），我們從中構(gòu)建UI。有鑒于此，React Native知道如何為特定平臺(tái)構(gòu)建應(yīng)用程序。例如，在創(chuàng)建Android應(yīng)用程序時(shí)，React Native將其按鈕組件轉(zhuǎn)換為Android中可用的本機(jī)按鈕。這種體系結(jié)構(gòu)還允許開發(fā)人員輕松地添加其他平臺(tái)。

<Button  
onPress={() => console.log('Hello Reader')}
title="Button with native styling" 
/>

開發(fā)商經(jīng)驗(yàn)

由于引入了應(yīng)用程序代碼的抽象，它通常與在什么平臺(tái)上執(zhí)行無關(guān)（從程序員的角度）。但是，React Native提供了一些工具，允許您判斷它運(yùn)行在哪個(gè)平臺(tái)上，以便您可以創(chuàng)建與本機(jī)更為相似的樣式/行為。

在極端情況下，當(dāng)給定組件看起來完全不同時(shí)，開發(fā)人員可以輕松地為特定平臺(tái)創(chuàng)建組件（只需在擴(kuò)展名之前的文件名中添加后綴.ios/.android）。

大小

由于Android系統(tǒng)在默認(rèn)情況下不提供運(yùn)行JavaScript代碼（JavaScript虛擬機(jī)）所需的機(jī)制，因此React Native必須在為此平臺(tái)構(gòu)建應(yīng)用程序時(shí)添加該機(jī)制。這使得應(yīng)用程序的大小比為iOS構(gòu)建的應(yīng)用程序大。

我的React原生應(yīng)用在手機(jī)上能用嗎？

如前所述，React Native用于Facebook產(chǎn)品?；谶@個(gè)原因，我們可以確定交付的代碼是經(jīng)過改進(jìn)的，并且已經(jīng)過許多用戶的測(cè)試。在他們的一篇文章中，F(xiàn)acebook保證其應(yīng)用程序?qū)⑹褂梦覀兛梢詮墓泊鎯?chǔ)庫下載的相同版本的React Native，這讓我們對(duì)這個(gè)框架的質(zhì)量更有信心。

值得注意的是，React Native目前對(duì)iOS的支持優(yōu)于Android。這意味著開發(fā)者應(yīng)該在這個(gè)平臺(tái)上花費(fèi)更多的時(shí)間，因?yàn)橐恍゜ug可能只會(huì)出現(xiàn)在Google的系統(tǒng)上。這個(gè)問題已經(jīng)得到了解決，并且正在努力改進(jìn)對(duì)Android的支持。

我的React本機(jī)應(yīng)用程序能在網(wǎng)絡(luò)上運(yùn)行嗎？

是的，有可能！實(shí)現(xiàn)這一點(diǎn)的一個(gè)方法是使用React Native Web（它用于Twitter的移動(dòng)版本，只是給你一個(gè)例子）。React Native Web是一個(gè)庫，它增加了對(duì)新平臺(tái)Web的支持。

由于這一點(diǎn)，我們可以得到代碼，您可以使用它來構(gòu)建一個(gè)web應(yīng)用程序。

將web應(yīng)用程序的開發(fā)與React Native web和ReactJS進(jìn)行比較時(shí)，缺點(diǎn)是可供RN使用的外部庫較少，開發(fā)人員需要使用內(nèi)部React Native組件，而不是常規(guī)的HTML和CSS代碼。

同樣值得注意的是，由于響應(yīng)了基于JavaScript語言的本機(jī)基礎(chǔ)，我們可以將負(fù)責(zé)業(yè)務(wù)邏輯和其他方面的代碼的公共部分轉(zhuǎn)移到單獨(dú)的項(xiàng)目（庫）中，然后在Web和移動(dòng)應(yīng)用程序中使用該項(xiàng)目。

作為一個(gè)示例，讓我們考慮一個(gè)視圖/頁面，其中包含一個(gè)購物車摘要以及特定條件下的促銷計(jì)算。負(fù)責(zé)計(jì)算總成本和折扣的代碼可以轉(zhuǎn)移到新庫中(購物車.js)，而各個(gè)平臺(tái)只負(fù)責(zé)顯示購物車視圖。

React Native是否意味著我們不需要本機(jī)開發(fā)人員？

在移動(dòng)應(yīng)用程序的典型用例中，開發(fā)過程中不需要本地開發(fā)人員。React本地開發(fā)人員在日常工作中使用JavaScript代碼。

但是，值得注意的是，創(chuàng)建應(yīng)用程序的各個(gè)階段，如configuration for release、configuration CI/CD和release process，與本機(jī)應(yīng)用程序的情況類似。在構(gòu)建了一個(gè)跨平臺(tái)的應(yīng)用程序之后，我們得到了與本機(jī)開發(fā)中相同的文件。這就是React本地開發(fā)人員需要使用支持移動(dòng)應(yīng)用程序的工具和服務(wù)的原因。其中一些工具可能是一個(gè)全新的東西，特別是對(duì)于那些以前只使用web應(yīng)用程序的人來說。

但是，由于React Native的高度普及，越來越多的工具支持此框架（如Bitrise或App Center），因此這些步驟也不需要有本地開發(fā)人員在場(chǎng)，盡管這肯定可以加快速度。

在與本機(jī)模塊集成（我們?cè)诒緳C(jī)端創(chuàng)建代碼，可以與JavaScript代碼通信）或僅在移動(dòng)應(yīng)用程序的特定區(qū)域使用React native時(shí)，本機(jī)應(yīng)用程序開發(fā)的經(jīng)驗(yàn)也會(huì)很有用。

為什么要考慮將React Native應(yīng)用于您的移動(dòng)應(yīng)用程序？

正如我在引言中提到的，考慮使用React原生技術(shù)的主要論點(diǎn)是降低開發(fā)成本和加快應(yīng)用程序開發(fā)的可能性。如果您想到的是為兩個(gè)平臺(tái)（iOS、Android）創(chuàng)建相同的移動(dòng)應(yīng)用程序，那么RN工作得很好，在這兩個(gè)平臺(tái)上，運(yùn)行速度并不重要。

因?yàn)镽eact Native支持快速的應(yīng)用程序開發(fā)，所以它也是一個(gè)很好的原型開發(fā)工具，可以快速地將想法交付給市場(chǎng)進(jìn)行業(yè)務(wù)驗(yàn)證。

這個(gè)框架的另一個(gè)優(yōu)點(diǎn)是，它允許我們立即向支持的平臺(tái)提供新的功能。

請(qǐng)注意，React Native使用流行的JavaScript語言和ReactJS框架，這意味著市場(chǎng)上有經(jīng)驗(yàn)的軟件開發(fā)人員的數(shù)量很大。

我希望現(xiàn)在您知道React Native是什么，它是如何工作的，以及為什么您應(yīng)該考慮在移動(dòng)應(yīng)用程序開發(fā)過程中使用它。我們將在我們的系列中發(fā)表更多關(guān)于React Native的文章，專門針對(duì)應(yīng)用程序所有者。敬請(qǐng)期待！