張志鵬， 黃素娟， 周永圣， 王楠

(上海大學(xué) 通信與信息工程學(xué)院， 上海 200444)

0 引言

在互聯(lián)網(wǎng)技術(shù)飛速發(fā)展的當(dāng)下，應(yīng)用開發(fā)也逐漸變得紛繁復(fù)雜起來，一方面是大數(shù)據(jù)下的需求整合，一方面也是因?yàn)殚_發(fā)技術(shù)的日新月異。為了滿足多樣的Web App 需求，越來越多的后端處理的業(yè)務(wù)邏輯開始轉(zhuǎn)移到前端來處理[1]。應(yīng)用開發(fā)可分為前后端兩大塊,而React是當(dāng)下流行的一個(gè)前端框架，它讓傳統(tǒng)前端開發(fā)變得更加高效且便于維護(hù)?；贖TML的前端界面開發(fā)的核心理念就是將龐大的數(shù)據(jù)呈現(xiàn)到復(fù)雜的用戶界面當(dāng)中，而傳統(tǒng)的MVC(即“模型—視圖—控制器”框架)模式過渡依賴模型，過程復(fù)雜且性能不夠優(yōu)化[2]。

在MVC模式下的項(xiàng)目開發(fā)中， 應(yīng)用的處理流程如圖1所示。

圖1 MVC模型

其缺點(diǎn)在于視圖的呈現(xiàn)對模型的依賴太大，并且視圖解析前服務(wù)器端已經(jīng)完成大部分工作，前端處于一種被“閹割”的狀態(tài)。結(jié)果導(dǎo)致在項(xiàng)目開發(fā)過程中，很多測試流程是冗余的，每一次需求的改動都要重新走一遍整個(gè)流程，交互成本太大，拖延進(jìn)度[3]。

一個(gè)應(yīng)用的發(fā)布往往伴隨著多終端的要求，如果不做到完全的前后端分離開發(fā)，勢必會增大后端代碼的冗余[4]。最好是前端組裝好視圖內(nèi)的各個(gè)組件，根據(jù)后端的數(shù)據(jù)來拿這些組件包裝就行。這樣核心在于組件匹配與數(shù)據(jù)交互，將前端獨(dú)立出來進(jìn)行開發(fā)調(diào)試，使分工更明確，也能夠極大地提高開發(fā)效率及降低運(yùn)維成本，故要實(shí)現(xiàn)前后端分離。

1 React技術(shù)棧

React提供了一種新的前端開發(fā)的思路，并且伴隨有成熟的第三方技術(shù)庫來輔助項(xiàng)目搭建。Web開發(fā)的過程就是一個(gè)將實(shí)時(shí)數(shù)據(jù)不斷更新至用戶界面的過程，這時(shí)就要對DOM進(jìn)行操作，而復(fù)雜和頻繁的DOM操作實(shí)際上又是性能瓶頸產(chǎn)生的重要原因[5]。為此React引入了一種虛擬DOM(Virtual DOM)的機(jī)制：在瀏覽器端用JavaScript實(shí)現(xiàn)了一套DOM API。基于React進(jìn)行開發(fā)的所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行的。每當(dāng)數(shù)據(jù)更新時(shí)，React都會重新構(gòu)建一棵虛擬DOM樹，然后將當(dāng)前的DOM樹與新構(gòu)建的DOM樹進(jìn)行對比，得到差異節(jié)點(diǎn)，再進(jìn)行瀏覽器端的局部真實(shí)DOM更新。因?yàn)樘摂MDOM是內(nèi)存數(shù)據(jù)，性能是極高的，而對真實(shí)DOM操作的那一部分，只是差異點(diǎn)所在的局部區(qū)域，因此能極大地提高性能。

虛擬DOM能夠提供更為簡明高效的UI開發(fā)邏輯，同時(shí)也帶來了組件化的開發(fā)思想。React的思想就是將界面的構(gòu)成拆分為組件，組件如何拆分取決于其功能上的差異，這需要開發(fā)人員自己去根據(jù)實(shí)際來設(shè)計(jì)，而完整的UI界面的形成就是通過這些小的組件的相互拼裝與嵌套。每個(gè)組件只關(guān)心自己部分的邏輯，彼此獨(dú)立，外層的界面的渲染只需要引入這個(gè)組件，這種方式下，每個(gè)組件的UI和邏輯都定義在組件內(nèi)部，與外部完全通過API來交互，實(shí)現(xiàn)復(fù)雜的功能就通過自由組合，React當(dāng)中，組件一般具有可組合、可重用、可維護(hù)、可測試四個(gè)特點(diǎn)。

除卻核心的React核心框架，實(shí)際項(xiàng)目開發(fā)當(dāng)中我們還需要依賴諸多開源的第三方庫，比如Antd-mobile庫、React-router-dom庫、Redux庫等，功能涵蓋但不限于界面風(fēng)格、路由技術(shù)、狀態(tài)管理技術(shù)。

2 設(shè)計(jì)實(shí)現(xiàn)

本節(jié)首先介紹整個(gè)應(yīng)用的項(xiàng)目工程的框架結(jié)構(gòu)，再詳細(xì)闡述項(xiàng)目設(shè)計(jì)當(dāng)中的核心管理組件Redux的實(shí)現(xiàn)，并在組件化開發(fā)的核心思想下，設(shè)計(jì)頁面組成的容器組件和UI組件，最后從App功能層面介紹應(yīng)用的功能性設(shè)計(jì)。

2.1 前端項(xiàng)目結(jié)構(gòu)

整個(gè)項(xiàng)目分為前后端兩大工程，兩個(gè)工程根據(jù)API接口進(jìn)行交互，其中前端的項(xiàng)目工程的結(jié)構(gòu)目錄如圖2所示。

圖2 前端項(xiàng)目結(jié)構(gòu)目錄

前端整體項(xiàng)目借助React官方提供的基于React+Webpack+ES6的腳手架工具搭建，搭建完就已經(jīng)能夠?qū)崿F(xiàn)熱加載與打包發(fā)布的功能，剩下的工作就只剩下對于項(xiàng)目的業(yè)務(wù)設(shè)計(jì)。首先要做的就是為整個(gè)項(xiàng)目的前端呈現(xiàn)而設(shè)計(jì)一款簡潔美觀的風(fēng)格樣式，市面上已經(jīng)有很多的開源模版，這里選取的是由螞蟻金服自主開發(fā)的一款UI設(shè)計(jì)框架，也是與React搭配十分高效的一款，整個(gè)框架主題為淡藍(lán)色，可自行進(jìn)行設(shè)置。在項(xiàng)目當(dāng)中只需在線安裝并在組件設(shè)計(jì)當(dāng)中引入對應(yīng)模塊即可。

2.2 Redux組件設(shè)計(jì)

對于一個(gè)龐大的項(xiàng)目來說，勢必有無數(shù)多的嵌套、平行級等各種關(guān)系的組件，組件之間的通信如果只借助原生的父級屬性傳值或者訂閱發(fā)布機(jī)制的話，工作量會異常龐大，這時(shí)就需要Redux這樣一個(gè)全局的管理者幫你在同一個(gè)地方查詢狀態(tài)、改變狀態(tài)、傳播狀態(tài)的變化，對于各個(gè)組件之間的通信與數(shù)據(jù)交互進(jìn)行一個(gè)系統(tǒng)地管理，使用Redux的場景如圖3所示。

A、某個(gè)組件的狀態(tài)，需要共享

B、某個(gè)狀態(tài)需要在任何地方都可以拿到

C、一個(gè)組件需要改變?nèi)譅顟B(tài)

圖3 Redux工作流程圖

D、一個(gè)組件需要改變另一個(gè)組件的狀態(tài)

Redux有三個(gè)核心的概念，即action、store、reducer。store是一個(gè)全局的狀態(tài)包含容器，某個(gè)時(shí)間點(diǎn)的狀態(tài)記為某一個(gè)state，這個(gè)狀態(tài)對應(yīng)著用戶界面的一個(gè)視圖，當(dāng)前時(shí)間點(diǎn)的state在store當(dāng)中是唯一的，action的作用就發(fā)出指令來給store通知state的變化，用戶通過界面的某一個(gè)操作與action進(jìn)行綁定，一旦視圖層有變化操作，其對應(yīng)的變化就會通過action傳給store倉庫。store再將當(dāng)前的狀態(tài)state與action交給reducer，reducer根據(jù)傳入的兩個(gè)參數(shù)，創(chuàng)造一個(gè)新的狀態(tài)newState并返回給store，如果newState在倉庫當(dāng)中被監(jiān)聽到，就完成視圖的重新渲染，這樣就完成了一次交互流程。該項(xiàng)目當(dāng)中的獲取用戶聊天信息列表功能action部分代碼如下：

import …

function initIO(dispatch,userid) {…}

//異步獲取消息列表數(shù)據(jù)

async function getMsgList(dispatch,userid) {…

//分發(fā)同步action

dispatch(receiveMsgList({users, chatMsgs,userid}))}

const receiveMsgList = ({users, chatMsgs,userid}) => ({

type: RECEIVE_MSG_LIST, data:{users, chatMsgs,userid}

})

import關(guān)鍵字里面包含的是該actions下所需要的所有的api接口，通過初始化函數(shù)獲取前端與后臺交互所需的參數(shù)。然后是異步的獲取用戶聊天信息列表的功能函數(shù)，先規(guī)定一個(gè)store所需的dispatch屬性與用戶的id屬性，前者負(fù)責(zé)將該指令action傳給store，后者則是查詢后臺數(shù)據(jù)的關(guān)鍵值，也就是只找本id下的所有聊天信息。與后臺交互信息如果成功的話就通過dispatch分發(fā)一個(gè)action給store，也就是這里的receiveMsgList方法，這里將查詢出來的數(shù)據(jù)全打包到此次的action里并傳到store當(dāng)中。其中store部分的實(shí)現(xiàn)如下：

import {…}

//向外暴露store對象

export default createStore(Reducer,composeWithDevTools(applyMiddleware(thunk)))

store部分旨在將當(dāng)前state、action給到reducers模塊，createStore當(dāng)中傳入的第二個(gè)屬性函數(shù)composeWithDevTools是一款便于瀏覽器當(dāng)中監(jiān)控state的插件，applyMiddleware函數(shù)則是向Redux庫提供異步方法。

獲取用戶消息部分的reducers設(shè)計(jì)部分如下：

import {…}

const initUserList = []

function chat(state=initChat,action) {… }

export default combineReducers({

user,userList,chat

});

import導(dǎo)入reducers模塊需要的依賴環(huán)境，再進(jìn)而處理store傳來的指令數(shù)據(jù)，即上述的chat函數(shù)，由于聊天部分有多個(gè)功能點(diǎn)，所以在處理用戶聊天信息函數(shù)chat當(dāng)中利用了case語句來處理多個(gè)action，區(qū)分點(diǎn)在于action的type屬性，當(dāng)chat函數(shù)被調(diào)用并掃描到前面的所分發(fā)的action類型，便執(zhí)行其對應(yīng)的邏輯流程，從而創(chuàng)造一個(gè)新的狀態(tài)newState返回給store模塊以進(jìn)行視圖層的渲染刷新。這里檢測到為RECEIVE_MSG_LIST時(shí)，便拿到action傳遞過來的參數(shù)，進(jìn)行新的狀態(tài)的數(shù)據(jù)構(gòu)建。而combineReducers函數(shù)則是用于打包reducers模塊下的多個(gè)reducer函數(shù)一并給store模塊，因?yàn)橐粋€(gè)項(xiàng)目往往伴隨有許多的reducer函數(shù)，這樣更便于管理。用戶在視圖層監(jiān)聽到一個(gè)新的狀態(tài)newState之后便進(jìn)行頁面刷新，這便是前端對于某個(gè)功能點(diǎn)實(shí)現(xiàn)的設(shè)計(jì)，其他的功能點(diǎn)大致相同，區(qū)別于業(yè)務(wù)邏輯的實(shí)現(xiàn)。

2.3 容器組件搭建

組件的設(shè)計(jì)搭建是項(xiàng)目最核心的地方，React的使用就是基于這樣一個(gè)組件化的開發(fā)模式，所以這部分的內(nèi)容也最復(fù)雜，這里只介紹項(xiàng)目中main主界面的實(shí)現(xiàn)，其他的后續(xù)頁面實(shí)現(xiàn)思路一致。其組件代碼如下：

import {…}

class Main extends Component{

navList = […]

componentDidMount () {…}

render(){…

return(

)}

export default connect(state =>({user:state.user,unReadCount:state.chat.unReadCount}),

{getUser})(Main)

main組件的實(shí)質(zhì)是一個(gè)類，它能夠被其他組件引用也可以嵌套所需的其他組件，通過import導(dǎo)入即可，在界面渲染之前，組件類要對state數(shù)據(jù)進(jìn)行解析處理，此處只介紹界面渲染成分，即return內(nèi)部的虛擬dom對象。上述設(shè)計(jì)代碼當(dāng)中，整個(gè)界面被div標(biāo)簽包裹，內(nèi)部分作三個(gè)部分，即NavBar、Switch、NavFooter三個(gè)標(biāo)簽，顯然這并非原生標(biāo)簽，而是經(jīng)過React封裝設(shè)計(jì)的UI組件類，其功能是給界面提供一個(gè)頂部與底部的導(dǎo)航欄，且風(fēng)格樣式與使用方法都在其自身組件設(shè)計(jì)類當(dāng)中設(shè)計(jì)好，main組件只要進(jìn)行調(diào)用和傳參。而Switch標(biāo)簽則取自于React的依賴庫——React-router-dom，該庫給頁面提供多個(gè)組件以進(jìn)行單頁應(yīng)用的前端路由技術(shù)的實(shí)現(xiàn)，該標(biāo)簽下分示main組件類所能到達(dá)的子路由，每個(gè)子路由對應(yīng)一個(gè)視圖層的一個(gè)子界面，雖然在視圖層其本質(zhì)仍是一個(gè)頁面，但是由于其路由url是不同的，故瀏覽器端能夠使用前進(jìn)后退按鈕回滾，提高了用戶體驗(yàn)。switch標(biāo)簽下，分發(fā)子路由，進(jìn)入到哪個(gè)子路由界面，取決于用戶的操作，數(shù)據(jù)的來源取決于視圖層用戶創(chuàng)建的指令action，然后只要解析子界面的組件即可，如果子界面仍嵌套子組件，實(shí)現(xiàn)過程與上述一致。

2.4 App功能設(shè)計(jì)實(shí)現(xiàn)

App項(xiàng)目在功能上有用戶登錄注冊模塊與實(shí)時(shí)聊天模塊兩個(gè)核心模塊。這兩個(gè)部分都需頻繁地同服務(wù)器端進(jìn)行數(shù)據(jù)交互，因此要獨(dú)立地構(gòu)建一個(gè)新的后端項(xiàng)目?；趎odejs的express框架能夠搭建一個(gè)完整的后端項(xiàng)目，express是一個(gè)快速、開放、極簡的 web 開發(fā)框架[6]。在這個(gè)基礎(chǔ)上要設(shè)計(jì)好數(shù)據(jù)庫存儲集合模型，這里用到的數(shù)據(jù)庫是非關(guān)聯(lián)性的MongoDB，相較于mysql而言MongoDB更加靈活更適合一個(gè)輕量型的應(yīng)用項(xiàng)目。然后要調(diào)校好后端路由請求的接受和發(fā)送，數(shù)據(jù)處理業(yè)務(wù)直接讓前臺來做。

整個(gè)功能流程大致如圖4所示。

圖4 APP功能流程圖

登錄注冊功能模塊的設(shè)計(jì)與大多數(shù)的應(yīng)用相同，界面提供3個(gè)輸入項(xiàng)：賬號、密碼與身份。根據(jù)登錄還是注冊將數(shù)據(jù)傳給后端，后端拿到數(shù)據(jù)來操作數(shù)據(jù)庫，如果是首次注冊或登錄，還需要完善用戶信息，包括用戶的基本情況(不同身份需要完善的信息不同)，如果已經(jīng)完善則跳轉(zhuǎn)至對應(yīng)用戶的主界面。

注冊界面實(shí)現(xiàn)結(jié)果如圖5、圖6所示。

在實(shí)時(shí)通訊模塊當(dāng)中，不同身份的用戶之間在用戶列表當(dāng)中是可以查看到對方的名片，只要在屏幕上點(diǎn)擊對應(yīng)的名片即可進(jìn)入到對話界面，也可以由用戶消息列表進(jìn)入，消息列表顯示了當(dāng)前用戶收到的未讀消息條目，點(diǎn)擊某一個(gè)用戶的未讀消息可與其進(jìn)行聊天，聊天界面即可正常編輯聊天內(nèi)容包括emoji表情。

實(shí)時(shí)通訊界面實(shí)現(xiàn)效果如圖7所示。

圖7 實(shí)時(shí)通訊頁面實(shí)現(xiàn)

3 打包部署

對于前端項(xiàng)目而言，Webpack技術(shù)能夠滿足項(xiàng)目打包需求，作為一種js的模塊打包器，它能夠?qū)?xiàng)目的結(jié)構(gòu)進(jìn)行分析，并且找到一些瀏覽器不能直接解析的文件格式而進(jìn)一步轉(zhuǎn)化或打包而做到適配，而基于React的腳手架開發(fā)已經(jīng)給項(xiàng)目配置好了Webpack，在配置文檔package.jsaon當(dāng)中封裝了基本的項(xiàng)目操作，包括項(xiàng)目啟動、打包、暴露內(nèi)置配置等等，執(zhí)行build 指令后，工程文件下會生成一個(gè)build文件夾，需要部署到云服務(wù)器上的所有內(nèi)容就是這個(gè)文件夾。

而后端的項(xiàng)目則沒有這樣一個(gè)系統(tǒng)的打包過程，直接將工程文件放入到云服務(wù)上即可，由于后端項(xiàng)目是基于node.js搭建，這里可以在系統(tǒng)內(nèi)全局安裝pm2工具，以檢測項(xiàng)目進(jìn)程并守護(hù)。

4 總結(jié)

本文基于React框架單頁App開發(fā)過程，從需求場景與特點(diǎn)、項(xiàng)目核心組件的設(shè)計(jì)分析、項(xiàng)目的打包部署等三個(gè)層面來全面分析了React技術(shù)棧應(yīng)用，React實(shí)際開發(fā)當(dāng)中的優(yōu)勢在于組件化、模塊化、工程化的開發(fā)模式，能夠極大地簡化開發(fā)流程以及代碼的精簡，通過前后端分離的獨(dú)立地開發(fā)，又使得開發(fā)人員分工更趨于細(xì)致，從而大大提高了開發(fā)效率并降低了運(yùn)維成本。