混合開發(fā)能不能使用react

小編給大家分享一下混合開發(fā)能不能使用react，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

使用React Native可以進(jìn)行混合開發(fā)；因?yàn)镽N和React使用了相同的開發(fā)語(yǔ)言JavaScript和相同的設(shè)計(jì)理念React，在React的基礎(chǔ)上添加了原生平臺(tái)的底層支持，這樣不同平臺(tái)的適配就交由RN去處理。

隨著 React 的盛行，其移動(dòng)開發(fā)框架 React Native 也收到了廣大開發(fā)者的青睞，以下簡(jiǎn)稱 RN。通過 RN 我們能夠使用 JavaScript 語(yǔ)言來(lái)實(shí)現(xiàn)跨平臺(tái)移動(dòng)應(yīng)用的開發(fā)，打開了前端工程師通往移動(dòng)平臺(tái)的大門。用 RN 官方的介紹來(lái)概括它的特點(diǎn)就是：Learn once, write anywhere。

如果你了解 React，那么學(xué)習(xí) RN 的話應(yīng)該會(huì)非常輕松。因?yàn)?RN 和 React 使用了相同的開發(fā)語(yǔ)言 JavaScript 和相同的設(shè)計(jì)理念 React，在 React 的基礎(chǔ)上添加了原生平臺(tái)的底層支持。這樣，不同平臺(tái)的適配就交由 RN 去處理，而開發(fā)者只需要關(guān)注 RN 平臺(tái)應(yīng)用開發(fā)本身。

本文將從 RN 混合開發(fā)（與 iOS、Android 平臺(tái)交互）的原理和實(shí)現(xiàn)進(jìn)行介紹，結(jié)合流程圖的方式讓大家進(jìn)一步的了解 RN 開發(fā)的思想和底層邏輯。

原理與實(shí)現(xiàn)

1. 從 Hello world 開始

先來(lái)看一個(gè)使用 RN 實(shí)現(xiàn)的簡(jiǎn)單的 Hello world 展示：

上方我們不難看到一些很熟悉的 React 語(yǔ)法，但除此之外我們還能看到其引入了 react-native 庫(kù)中的 AppRegistry API 和 Text (文本)組件，這便是 RN 提供給我們用于調(diào)用原生平臺(tái)的 APIs 和 組件，其能夠在不同移動(dòng)設(shè)備上實(shí)現(xiàn)一致的功能和邏輯。最后展示在 APP 中的便是 Hello world 文本，而至于 AppRegistry API 后面會(huì)做相應(yīng)介紹。

2. 解刨 React Native 應(yīng)用的結(jié)構(gòu)

那么看完 Hello world 示例后，我們應(yīng)該大致知道了 RN 應(yīng)用的一個(gè)結(jié)構(gòu)，我們用圖例的方式進(jìn)行解刨說明，如下圖所示：

從圖中可以看到，我們整個(gè)的 RN 應(yīng)用可以分為兩層展示：

JavaScript Code 層

Native Code 層

也可以理解為所謂的應(yīng)用層和底層。應(yīng)用層通過 JavaScript 橋接層 與底層平臺(tái)進(jìn)行交互，獲取底層平臺(tái)的原生 APIs、UI 組件及一些自定義組件等。比如 Hello world 示例中引入的 AppRegistry API 和 Text 組件便是很好的說明。

這樣的分層能夠使應(yīng)用層的開發(fā)變得簡(jiǎn)單、高效和跨平臺(tái)，對(duì)于應(yīng)用的穩(wěn)定性、運(yùn)行時(shí)的性能來(lái)說將和原生平臺(tái)保持接近。

3. 原生平臺(tái)調(diào)用 React Native 組件

大致了解完 React Native 應(yīng)用的結(jié)構(gòu)后，我們不妨再來(lái)認(rèn)識(shí)下原生平臺(tái)是如何調(diào)用 React Native 組件的。我們 RN 的代碼要跑在原生 APP 中那必然需要原生 APP 加載運(yùn)行對(duì)應(yīng)的 RN 組件，以實(shí)現(xiàn)混合開發(fā)和交互的功能。這里就要來(lái)介紹下剛剛擱置的 AppRegistry API 了。

一般我們的 RN 項(xiàng)目都會(huì)有一個(gè)入口文件，比如 index.js（老版本會(huì)存在兩個(gè)：index.ios.js 和 index.android.js）用于注冊(cè)根組件并提供給原生平臺(tái)運(yùn)行。這里的注冊(cè)根組件就要通過 AppRegistry API 來(lái)實(shí)現(xiàn)。

我們需要在根組件里調(diào)用 AppRegistry 中的 registerComponent 方法進(jìn)行組件的注冊(cè)。注冊(cè)完之后原生平臺(tái)便可以通過 runApplication 方法來(lái)運(yùn)行注冊(cè)過的根組件。需要注意的是注冊(cè)和運(yùn)行的組件名稱兩者必須保持一致，這樣才能夠?qū)崿F(xiàn)加載對(duì)應(yīng)的組件。比如 Hello world 示例中我們注冊(cè)的根組件名為 HelloWorldApp，并且注入相應(yīng)的組件模塊。另外同時(shí)一個(gè)入口文件中，我們也可以注冊(cè)多個(gè)根組件。

4. 原生加載 React Native 界面

剛剛在介紹原生平臺(tái)調(diào)用 RN 組件時(shí)提到了加載對(duì)應(yīng)根組件的功能。那么是不是原生平臺(tái)只有通過不斷的調(diào)用運(yùn)行 RN 注冊(cè)的根組件才能實(shí)現(xiàn)不同頁(yè)面的首次加載呢（這里的加載指原生打開 RN 頁(yè)面）？答案是否定的。

除了上述通過調(diào)用不同的根組件來(lái)實(shí)現(xiàn)原生打開不同的 RN 界面外（圖中第二點(diǎn)），我們還可以調(diào)用一個(gè)根組件來(lái)實(shí)現(xiàn)。唯一的區(qū)別在于我們需要調(diào)用時(shí)在 initialProperties 中添加區(qū)分不同界面的標(biāo)識(shí)位來(lái)渲染不同的組件，就好比在 URL 上攜帶不同參數(shù)跳轉(zhuǎn)到同一路由一樣，根據(jù)路由上的參數(shù)在應(yīng)用層進(jìn)行對(duì)應(yīng)組件的渲染。

在 RN 根組件中我們可以通過 this.props 獲取原生平臺(tái)攜帶過來(lái)的參數(shù)對(duì)象，如示例中的 viewName，再根據(jù) viewName 實(shí)現(xiàn) RN 內(nèi)部組件的渲染，當(dāng)然也可以結(jié)合 react-navigation 來(lái)實(shí)現(xiàn)路由模塊的切換。至于最終選擇哪種方式加載，決定權(quán)還是要看業(yè)務(wù)的劃分和功能的定義。相比較而言第一種可能更加靈活和便捷。

5. React Native 與原生平臺(tái)通信原理

在混合開發(fā)模式下，我們不可避免的需要和原生平臺(tái)進(jìn)行數(shù)據(jù)的通信，那么在 RN 中，我們?nèi)绾闻c原生平臺(tái)進(jìn)行通信呢？如何獲取原生平臺(tái)提供的數(shù)據(jù)或?qū)?shù)據(jù)傳遞給原生平臺(tái)呢？下面這張圖便介紹了這一流程。

在 RN 中，我們可以引用 react-native 模塊中的 NativeModules API 來(lái)進(jìn)行數(shù)據(jù)通信，調(diào)用的方法是 NativeModules.模塊名稱.接口名稱，而原生平臺(tái)返回?cái)?shù)據(jù)到 RN 平臺(tái)是基于回調(diào)，代碼如下：

import { NativeModules } from 'react-native';
const userInfo = NativeModules.UserInfo; // 獲取自定義用戶信息模塊
console.log(userInfo.userName); // 打印用戶名
const router = NativeModules.Router; // 獲取自定義路由模塊
// 調(diào)用原生路由跳轉(zhuǎn)方法
router.openHome('參數(shù)', (res) => {
    console.log(res); // 打印返回?cái)?shù)據(jù)
});

通過 NativeModules 我們可以靈活的獲取或傳遞數(shù)據(jù)給原生平臺(tái)，同時(shí)我們也可以根據(jù)業(yè)務(wù)需要編寫不同的 Bridge 方法來(lái)實(shí)現(xiàn)數(shù)據(jù)通信模塊的封裝，比如用戶信息模塊、路由跳轉(zhuǎn)模塊及網(wǎng)絡(luò)請(qǐng)求模塊等。

6. Redux 架構(gòu)

在 RN 項(xiàng)目中，除了與原生平臺(tái)通信和交互的功能外，RN 平臺(tái)自身也需要實(shí)現(xiàn)一些數(shù)據(jù)狀態(tài)的管理。這里我們還得認(rèn)識(shí)下 Redux 架構(gòu)。

Redux 是一個(gè)用于管理 React 應(yīng)用狀態(tài)的容器，在 RN 中也同樣適用。其采用單一數(shù)據(jù)流的方式來(lái)實(shí)現(xiàn)數(shù)據(jù)的管理，唯一改變 state 的方法是提交 action 操作。這樣的架構(gòu)使得我們的 RN 項(xiàng)目數(shù)據(jù)易于維護(hù)或擴(kuò)容，改變數(shù)據(jù)的流程容易追蹤和捕獲。需要了解的具體關(guān)鍵字如下：

具體文檔可以參考：http://cn.redux.js.org/

當(dāng)然你也可以使用其他第三方庫(kù)實(shí)現(xiàn)類似的架構(gòu)，比如 mobx、dva 等。

7. CSS-in-JS

除了 Redux 架構(gòu)，RN 中還加入了 CSS in JS 的概念，將原本關(guān)注點(diǎn)分離的理念轉(zhuǎn)移到了關(guān)注點(diǎn)混合上，使得我們可以在 JS 中寫 CSS 代碼，但這并不違背之前關(guān)注點(diǎn)分離的理念。

現(xiàn)在隨著組件化概念的流行，對(duì)從組件層面維護(hù) CSS 樣式的需求日益增大，CSS-in-JS 就是在組件內(nèi)部使用 JavaScript 對(duì) CSS 進(jìn)行了抽象，可以對(duì)其聲明和加以維護(hù)。這樣不僅降低了編寫 CSS 樣式帶來(lái)的風(fēng)險(xiǎn)，也讓開發(fā)變得更加輕松。它和 CSS Modules 的區(qū)別是不再需要 CSS 樣式文件。

結(jié)合 JSX 語(yǔ)法，在 RN 中書寫和維護(hù) CSS 變得更加便捷，也是 Web 組件化不斷發(fā)展的必然產(chǎn)物。

8. React Native 中 的 Flex 布局

另外，在開發(fā) RN 項(xiàng)目時(shí)，官方推薦使用的布局方式是 Flex 布局，因?yàn)?Flexbox 可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)，這也解決了跨平臺(tái)布局呈現(xiàn)的問題。

相比我們客戶端使用的 Flex 布局，RN 中的 Flex 布局有稍許的不同，比如 flexDirection 的默認(rèn)值是 column 而不是 row，flex 也只能指定一個(gè)數(shù)字值等。關(guān)于 Flex 布局的介紹可以參考：Flex 布局教程：語(yǔ)法篇、Flex 布局教程：實(shí)例篇

9. React Native 的熱部署

最后我們介紹下 RN 中的熱部署，這也是選擇 RN 開發(fā) APP 的一個(gè)重要原因之一。相比傳統(tǒng) APP 更新，大都需要第三方審核的流程，而這個(gè)流程可能會(huì)很慢或者不及時(shí)，遇到需要緊急修復(fù)的 bug 無(wú)法及時(shí)更新而導(dǎo)致直接的經(jīng)濟(jì)損失是很常見的問題，而 RN 的熱部署可以一定程度上解決或減輕這一問題的影響。那么其實(shí)現(xiàn)原理是怎樣的呢？

上圖左側(cè)部分便展現(xiàn)了用戶訪問 RN 應(yīng)用的熱部署流程。首先用戶訪問 APP，APP 會(huì)向 RN 服務(wù)器請(qǐng)求資源包，如果資源包未更新則讀取本地緩存資源，如果開發(fā)者為了解決 bug 重新更新了服務(wù)器上的資源包，那么 APP 拉去后會(huì)緩存起來(lái)，待用戶下次進(jìn)入后再進(jìn)行更新。這便是 RN 熱部署的流程。

在本地開發(fā)時(shí)，我們不難發(fā)現(xiàn)當(dāng)我們?cè)谶\(yùn)行起來(lái)的 RN 項(xiàng)目中修改代碼時(shí)，再次從 APP 進(jìn)入 RN 頁(yè)面，本地終端會(huì)再次加載一次更新后的資源數(shù)據(jù)，這也是 RN 熱部署的體現(xiàn)。

同樣線上的熱部署則需要將我們打包后的 RN 資源上傳到服務(wù)器上供 APP 讀取來(lái)實(shí)現(xiàn)。

我們可以手動(dòng)執(zhí)行打包、上傳發(fā)布流程，當(dāng)然為了減少人為干預(yù)，實(shí)現(xiàn)前端自動(dòng)化，我們也可以把這塊流程交給構(gòu)建平臺(tái)去自動(dòng)打包部署，這便需要搭建一個(gè)后臺(tái)系統(tǒng)進(jìn)行管理。

以上是“混合開發(fā)能不能使用react”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！