React Native在iOS開發(fā)中的評價
一、引言
React Native作為Facebook推出的一個優(yōu)秀集成作品，充分利用了現(xiàn)有的技術(shù)資源，為開發(fā)者帶來了全新的開發(fā)體驗。其背后的團(tuán)隊對前端技術(shù)的深刻理解，使得Native code在React Native中更多地“退居二線”，為開發(fā)者提供了更為便捷的開發(fā)方式。
二、系統(tǒng)結(jié)構(gòu)與前端對比
React Native與前端開發(fā)的對比，主要體現(xiàn)在以下幾個方面：
JSX與HTML：JSX為JavaScript的語法擴(kuò)展，允許在JavaScript中編寫類似HTML的代碼，更為直觀和方便。
CSS-layout與CSS：傳統(tǒng)的CSS與React Native中的CSS-layout相結(jié)合，使前端可以繼續(xù)使用熟悉的類CSS方式編寫布局。
ECMAScript 6與ECMAScript 5：React Native采用更新的ECMAScript 6標(biāo)準(zhǔn)，提高了代碼的效率和可讀性。
React Native View與DOM：與傳統(tǒng)的Web開發(fā)中的DOM不同，React Native View更接近原生開發(fā)的界面元素。
三、React Native的優(yōu)勢
1. 代碼復(fù)用與降低學(xué)習(xí)成本：復(fù)用React系統(tǒng)，大大減少了學(xué)習(xí)和開發(fā)成本。JS層通過diff機(jī)制將數(shù)據(jù)傳遞給Native層，簡化了界面開發(fā)的復(fù)雜性。
2. 調(diào)試便捷：修改了JS代碼后，通過內(nèi)建的NodeJS watcher編譯成bundle，即可在模擬器中實(shí)時查看效果。而且可以通過chrome進(jìn)行調(diào)試，使得調(diào)試過程更為方便。
四、React Native的挑戰(zhàn)與遺留問題
雖然React Native帶來了許多優(yōu)勢，但仍存在一些挑戰(zhàn)和遺留問題：
1. 依賴原生組件和方法：系統(tǒng)仍然依賴原生組件暴露出來的組件和方法。一些原生組件的并未完全暴露給JS層，導(dǎo)致某些功能無法實(shí)現(xiàn)。目前還有許多組件是iOS only的，對于跨平臺開發(fā)帶來一定的挑戰(zhàn)。
2. 通信機(jī)制的設(shè)計問題：雖然React Native的通信機(jī)制設(shè)計得相對完善，但由于只有js-objc的單向調(diào)用，可能會帶來一些潛在的問題和復(fù)雜性。
五、總結(jié)
React Native是一個令人印象深刻的集成作品，為iOS開發(fā)帶來了許多優(yōu)勢和便利。盡管仍然存在一些挑戰(zhàn)和遺留問題，但隨著技術(shù)的不斷進(jìn)步和社區(qū)的發(fā)展，這些問題有望得到解決。對于前端開發(fā)者來說，React Native提供了一個更為接近原生開發(fā)的體驗，降低了學(xué)習(xí)成本，提高了開發(fā)效率。深入探索React Native：初次學(xué)習(xí)成本高，但后續(xù)開發(fā)變得更簡單
一、React Native的雙重挑戰(zhàn)
在React Native的框架下，用戶需要在不同的平臺下編寫兩套代碼，這增加了初次的學(xué)習(xí)成本。與傳統(tǒng)的Hybrid方案不同，React Native要求用戶深入了解并熟悉其特有的接口和機(jī)制。盡管React的確讓后續(xù)開發(fā)變得簡單了一些，但這套基于iOS且殘缺不全（主要體現(xiàn)在css-layout上）的系統(tǒng)，在初學(xué)時仍可能讓人感到困惑。
二、React Native的完善性與挑戰(zhàn)
React Native的文檔尚未完全完善，許多信息需要通過示例代碼進(jìn)行摸索。集成到現(xiàn)有應(yīng)用的過程也可能面臨挑戰(zhàn)，相關(guān)的文檔可能還不夠詳盡。據(jù)官方消息，Android版本的發(fā)布還需等待半年時間，屆時整個系統(tǒng)設(shè)計可能會有重大更新，這也增加了開發(fā)的不確定性。
三、細(xì)節(jié)之處：TabBar與API設(shè)計
在使用TabBar時，React Native的iconfont方案讓我印象深刻。API的設(shè)計卻讓我有些頭疼。在React Native的代碼中，我發(fā)現(xiàn)了一個有趣的例子：
四、背景與調(diào)研過程
一周前，當(dāng)React Native還未開源時，我們通過對Facebook Group應(yīng)用的ipa進(jìn)行反編譯，對其源碼進(jìn)行了解讀。這個過程讓我們對React Native的內(nèi)部核心機(jī)制有了基本了解。React Native的核心實(shí)現(xiàn)中，沒有使用webview，而是通過JavascriptCore執(zhí)行JS代碼。iOS Native code提供了核心類和組件，而React Native的JS部分則負(fù)責(zé)將這些基本組件轉(zhuǎn)化為業(yè)務(wù)端的業(yè)務(wù)組件。這一切的實(shí)現(xiàn)都依賴于一套類似css的子集，用來解決樣式問題。
五、React Native的核心機(jī)制
React Native的核心機(jī)制相當(dāng)復(fù)雜和強(qiáng)大。它采用了一種類似css-layout的子集來解決樣式問題，使得Native的核心組件能夠組成JS層的基本組件，再進(jìn)一步組成業(yè)務(wù)端的業(yè)務(wù)組件。在這個過程中，facebook/css-layout的C語言版本發(fā)揮了重要作用。盡管React Native還存在許多待完善之處，但其強(qiáng)大的功能和潛力讓人充滿期待。
React Native的學(xué)習(xí)成本雖然較高，但一旦掌握，后續(xù)開發(fā)將變得更為簡單。其獨(dú)特的機(jī)制和豐富的功能為開發(fā)者提供了廣闊的空間和可能性。隨著其不斷的完善和發(fā)展，我們期待React Native能為我們帶來更多的驚喜和突破。React Native的核心概念與設(shè)計解析
一、React Native概述
在React Native框架中，工程師的工作主要圍繞兩個方面展開：JS端的工程師主要解決如何將基本組件拼裝成可用的React組件的問題；而Native Code的工程師則致力于提供核心組件，并確保這些組件具備足夠的擴(kuò)展性、靈活性和性能。簡單來說，React Native是一個允許開發(fā)者使用React編程范式來構(gòu)建Native移動應(yīng)用的跨平臺解決方案。
二、React Native與ReactJS的關(guān)聯(lián)
React Native的設(shè)計深受ReactJS的影響。盡管我對ReactJS在生產(chǎn)環(huán)境中的使用經(jīng)驗有限（主要熟悉Angular），但從代碼層面來看，ReactJS的設(shè)計理念在React Native中得到了充分的體現(xiàn)。例如，ReactJS中的大工廠入口createElement并不直接返回某個實(shí)體DOM對象，而是一個數(shù)組。這個特點(diǎn)在React Native中也有類似的體現(xiàn)。
三、React Native的核心設(shè)計思路
在React Native中，底層的渲染核心是可以更換的。Facebook基于JSX、css-layout等開源項目，構(gòu)建了一套將JS與Native開發(fā)緊密結(jié)合的橋梁。通過替換 ui/browser 里的代碼為一套 Native的橋接JS，React Native成功復(fù)用了React的MVVM模式，實(shí)現(xiàn)了數(shù)據(jù)到Native界面的自動映射。Native code需要提供三組核心API：提供核心組件的API、方法以及對css進(jìn)行解析并返回Style的ComputedStyle。
四、React Native的創(chuàng)新之處
從Native開發(fā)角度看，React Native相當(dāng)于重新發(fā)明了一個瀏覽器渲染引擎并套上了React的殼。而從Web開發(fā)角度看，React Native則是將原來React的后端用Native code來實(shí)現(xiàn)。這種創(chuàng)新解決了Webview在交互和性能上的問題，使得Native開發(fā)更加簡潔。
五、React Native的優(yōu)勢與劣勢
React Native的優(yōu)勢在于：它不用Webview，從而徹底擺脫了Webview帶來的交互和性能問題；具備強(qiáng)大的擴(kuò)展性，因為Native端提供的是基本控件，JS可以自由組合使用；能夠直接使用Native原生的高級動畫。特別是在一些復(fù)雜的動畫效果上，如FB Group app中的面板滑出帶果凍彈動效果，或基于某個點(diǎn)展開的動畫，這些用Native code實(shí)現(xiàn)輕而易舉，而用Web技術(shù)則難度較高。
React Native是一個融合了React編程范式和Native移動開發(fā)技術(shù)的創(chuàng)新解決方案，它解決了傳統(tǒng)移動開發(fā)中的一些痛點(diǎn)，為開發(fā)者提供了更加高效、靈活的移動應(yīng)用開發(fā)方式。 優(yōu)勢相對于Native App
更新遠(yuǎn)端JS直接更新app
通過更新遠(yuǎn)端JS，Native app能夠迅速地進(jìn)行功能迭代和修復(fù)錯誤。這一優(yōu)勢使得開發(fā)者能夠像網(wǎng)頁開發(fā)者一樣，隨時調(diào)整和優(yōu)化應(yīng)用的功能，而無需經(jīng)過冗長的審核和發(fā)布流程。這一優(yōu)勢如今已被眾多大型Native app廣泛采納，成為行業(yè)標(biāo)準(zhǔn)。
劣勢分析
擴(kuò)展性與Native Code的對比
相較于Web開發(fā)和直接編寫Native code，其擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不足。Web的開放性和靈活性使其更容易適應(yīng)不斷變化的需求，而直接編寫Native code則能提供更高效的性能和更精細(xì)的控制。概念轉(zhuǎn)換是這種開發(fā)方式面臨的重大挑戰(zhàn)，從Native到Web需要跨越諸多概念差異，這必然導(dǎo)致雙方都需要做出妥協(xié)。例如，Web開發(fā)者需要適應(yīng)一套受限的CSS規(guī)則，而Native開發(fā)者則需要將CSS布局轉(zhuǎn)換為原生語言的表達(dá)。這種轉(zhuǎn)換在動畫、布局等方面尤為復(fù)雜，特別是在同時支持Android和iOS時。
React Native的開源與特點(diǎn)
React Native已經(jīng)開源，并且僅有iOS版本。從前端工程師和系統(tǒng)整體角度看，React Native具備快速響應(yīng)和與原生應(yīng)用相近的性能優(yōu)勢。開發(fā)者通過JavaScript和React編寫代碼，而界面渲染則由原生組件負(fù)責(zé)，這意味著應(yīng)用能夠充分利用原生平臺的性能優(yōu)勢。React Native的開源特性使得開發(fā)者可以參與到社區(qū)建設(shè)中，共同優(yōu)化和完善這一開發(fā)框架。
為啥開發(fā)app不建議uniapp
uniapp是否會取代原生開發(fā)
uniapp作為一種跨平臺開發(fā)框架，確實(shí)為開發(fā)者提供了便捷的開發(fā)方式。它允許開發(fā)者使用Vue.js的語法和思維方式來開發(fā)所有前端應(yīng)用，包括Native App。是否選擇uniapp作為開發(fā)工具，需要考慮項目的具體需求和目標(biāo)。對于追求高性能、精細(xì)控制和極致用戶體驗的項目，原生開發(fā)仍然是最佳選擇。
uniapp的技術(shù)特點(diǎn)與考量
uni-app內(nèi)置了HTML5+引擎，使得JS能夠直接調(diào)用豐富的原生能力。這為開發(fā)者提供了更多的選擇和靈活性。對于一些對JS掌握不足的開發(fā)者來說，使用uni-app可能會面臨一些挑戰(zhàn)。uniapp的組件具備原生調(diào)用能力，這可能與某些第三方vue庫存在兼容性問題。在選擇uni-app作為開發(fā)工具時，需要充分考慮團(tuán)隊的技術(shù)儲備和項目需求。
對uniapp的評價
uniapp的優(yōu)勢在于其采用了Vue的寫法，上手快，且能滿足大部分app的原生功能需求。調(diào)試打包以及各種配置也相對簡單明了。在特定場景下，如需要快速開發(fā)、跨平臺部署等，uni-app是一個值得考慮的選擇。如同其他技術(shù)選型一樣，是否選擇uni-app還需要根據(jù)項目的具體情況進(jìn)行綜合考慮。關(guān)于廣告聯(lián)盟和廣告變現(xiàn)的相關(guān)功能，如激勵視頻等，對于希望通過廣告實(shí)現(xiàn)營收的項目來說，可能是一個有益的補(bǔ)充。從開發(fā)者體驗角度看，uniapp開發(fā)APP端相對流暢，特別是iOS端體驗與原生應(yīng)用非常接近。走進(jìn)uni-app跨端框架的世界：從理解差異到開發(fā)實(shí)踐
章節(jié)一：uni-app：跨端開發(fā)的佼佼者
隨著移動應(yīng)用的普及，跨端開發(fā)框架成為了開發(fā)者的福音。uni-app正是其中的佼佼者，憑借對各家小程序深度理解的優(yōu)勢，成功搭建起了抹平多端差異的橋梁。憑借著出色的性能表現(xiàn)，uni-app已支持6億手機(jī)用戶，成為了業(yè)內(nèi)最熱門的應(yīng)用框架之一。
章節(jié)二：mpvue與uniapp的對比與解析
mpvue是基于vue的優(yōu)化版本，它針對vue的runtime和compiler進(jìn)行了深度優(yōu)化。隨著時間的推移，mpvue已經(jīng)停止維護(hù)。與mpvue相比，uniapp則是一個更加開放、支持多種開發(fā)工具的多端開發(fā)框架。兩者之間存在明顯的差異，這也是導(dǎo)致APP用戶與微信小程序用戶關(guān)聯(lián)不上的原因之一。
章節(jié)三：uniapp與原生APP的區(qū)別及優(yōu)勢
uniapp與原生APP存在顯著的差異。原生APP主要面向某一特定平臺開發(fā)，而uniapp則支持跨平臺開發(fā)，一套代碼即可適配多個平臺。uniapp擁有自動的框架預(yù)載，頁面加載速度更快。而在技術(shù)基礎(chǔ)上，uniapp使用小程序的標(biāo)簽，而原生APP則主要使用web端的標(biāo)簽。
章節(jié)四：獨(dú)自開發(fā)APP：uniapp的實(shí)現(xiàn)能力
uniapp為開發(fā)者提供了獨(dú)自開發(fā)APP的可能。作為一款基于Vue.js、Weex、小程序等技術(shù)開發(fā)的跨平臺應(yīng)用開發(fā)框架，uniapp旨在統(tǒng)一前端開發(fā)技術(shù)，使開發(fā)者能夠根據(jù)業(yè)務(wù)需求快速開發(fā)適配多個平臺的應(yīng)用程序。即使是微信小游戲的開發(fā)，只要掌握編碼技巧，也能輕松通過uniapp實(shí)現(xiàn)。
章節(jié)五：深入探究hybrid App中js調(diào)用native接口的原理
在移動應(yīng)用開發(fā)中，hybrid App的開發(fā)模式日益受到關(guān)注。其中，js調(diào)用native接口的原理是開發(fā)者必須掌握的關(guān)鍵技術(shù)。在hybrid APP中，js通過調(diào)用native接口實(shí)現(xiàn)了一些硬件功能的接入，如相機(jī)、位置等。其原理主要是通過WebViewClient.shouldOverrideUrlLoading方法攔截指定格式的URL，通過cordova插件等實(shí)現(xiàn)js與native的通信。當(dāng)native處理完結(jié)果后，通過定義的回調(diào)callback將結(jié)果返回js。這一過程的順暢進(jìn)行，為開發(fā)者在hybrid App開發(fā)中提供了更多的可能性。
uni-app作為當(dāng)下熱門的跨端開發(fā)框架，其強(qiáng)大功能與優(yōu)勢吸引了眾多開發(fā)者。從理解其與原生APP、mpvue的差異，到掌握獨(dú)自開發(fā)APP的技巧，再到深入探究hybrid App中js調(diào)用native接口的原理，我們將能夠更好地利用uni-app進(jìn)行應(yīng)用開發(fā)，為移動應(yīng)用的發(fā)展貢獻(xiàn)自己的力量。 3. 通過鏈接實(shí)現(xiàn)JS與Native的交互
3.1 通過Iframe和XHR構(gòu)造鏈接
在現(xiàn)代Web開發(fā)中，我們經(jīng)常需要實(shí)現(xiàn)JavaScript（JS）與原生應(yīng)用（Native）之間的交互。這種交互可以通過多種方式完成，其中構(gòu)造鏈接并發(fā)送至Native是一種常見且有效的方法。這種交互可以通過兩種主要方式實(shí)現(xiàn)：通過Iframe嵌入或者XMLHttpRequest（XHR）。
當(dāng)我們在Web頁面中嵌入一個Iframe時，可以將其作為與Native應(yīng)用溝通的橋梁。XHR作為一種異步通信方式，也常被用于在JS和Native間建立聯(lián)系。這兩種方式都能夠幫助我們在Web和Native之間構(gòu)建流暢的通信渠道。
3.2 Native處理后的回調(diào)機(jī)制
Native完成處理后，通過`webView.addJavascriptInterface`調(diào)用JS中掛載在window對象的方法。這是一個統(tǒng)一的回調(diào)機(jī)制，稱為`nativeCallback`。通過這個機(jī)制，Native能夠識別出每次交互的結(jié)果需要回調(diào)JS中的哪個函數(shù)。這種回調(diào)機(jī)制的關(guān)鍵是通過`callbackID`來識別不同的交互過程。
當(dāng)Native接收到來自JS的請求并完成處理后，它會通過`callbackID`找到對應(yīng)的JS函數(shù)進(jìn)行回調(diào)，從而實(shí)現(xiàn)數(shù)據(jù)的反饋和交互的完成。這種機(jī)制確保了JS和Native之間的通信流暢且準(zhǔn)確。
3.3 JS與Native交互的兩種方式
總結(jié)一下，實(shí)現(xiàn)JS與Native交互的主要方式是通過兩個方法：`addJavascriptInterface`和`shouldOverrideUrlLoading`。
`addJavascriptInterface`：這個方法允許我們在JS和Native之間建立橋梁，使得兩者可以相互調(diào)用對方的方法。通過這個方法，我們可以在JS中定義一些函數(shù)或方法，然后在Native中調(diào)用這些函數(shù)來實(shí)現(xiàn)特定的功能。
`shouldOverrideUrlLoading`：這個方法在URL加載時被調(diào)用，它可以讓我們攔截并處理URL的加載過程。通過覆蓋這個方法，我們可以在URL加載前進(jìn)行自定義處理，從而實(shí)現(xiàn)JS與Native之間的交互。
這兩種方式共同構(gòu)成了JS與Native之間交互的基礎(chǔ)。在實(shí)際開發(fā)中，我們可以根據(jù)具體的需求和場景選擇適合的方式來實(shí)現(xiàn)JS與Native的通信。通過這種方式，我們可以充分利用Web和Native的優(yōu)勢，構(gòu)建出更加流暢、功能豐富的應(yīng)用體驗。
