本文為原創(chuàng)內(nèi)容寒波，謝絕轉(zhuǎn)載
引入
React Native作為2015年誕生的跨平臺(tái)解決方案鞋真，旨在降低移動(dòng)端的開發(fā)門檻的同時(shí)依舊能保有移動(dòng)端高效的渲染能力崇堰，React Native產(chǎn)出的并不是“web應(yīng)用”，“H5”涩咖，又或者是“混合應(yīng)用”海诲。他的賣點(diǎn)是一個(gè)實(shí)實(shí)在在由原生組件去渲染的真正移動(dòng)化應(yīng)用，從使用感受上和用Objective-C或Java編寫的應(yīng)用相比幾乎是無(wú)法區(qū)分的檩互。 React Native所使用的基礎(chǔ)UI組件和原生應(yīng)用完全一致特幔。 開發(fā)者只是把這些基礎(chǔ)組件使用JavaScript和React的方式組合起來(lái)，那么這種由非原生語(yǔ)言編寫的視圖組件在借由原生能力繪制渲染時(shí)都經(jīng)歷了哪些操作和轉(zhuǎn)換闸昨？
正文
首先這里我們將本節(jié)要講的整個(gè)過(guò)程分為兩個(gè)階段蚯斯，來(lái)拆解描述。
準(zhǔn)備階段由原生來(lái)承擔(dān)大部分工作饵较，包括啟動(dòng)JS運(yùn)行環(huán)境拍嵌，創(chuàng)建空白畫布，實(shí)例化自定義module及導(dǎo)出各種可供JS使用的API等循诉。
而渲染階段的主要職責(zé)包括根據(jù)注冊(cè)信息創(chuàng)建實(shí)際視圖横辆、維護(hù)虛擬dom樹、維護(hù)待渲染隊(duì)列及對(duì)布局樣式進(jìn)行轉(zhuǎn)換等茄猫。
接下來(lái)我會(huì)圍繞這兩個(gè)階段做一個(gè)詳細(xì)的描述狈蚤。
準(zhǔn)備階段
在準(zhǔn)備階段，首先你需要指定并創(chuàng)建RN的入口視圖并將其添加到原生的視圖容器中募疮，這個(gè)視圖可以和任意純?cè)晥D一樣去控制其入口視圖大小和位置炫惩， 也就是說(shuō)支持對(duì)一個(gè)頁(yè)面只做局部RN化渲染；
然后阿浓，你需要?jiǎng)?chuàng)建和JS端的橋接對(duì)象并且設(shè)置加載路徑他嚷，在設(shè)置完成后交由我們剛才創(chuàng)建的根視圖去使用這個(gè)配置好的橋接對(duì)象。
而其中React Native的啟動(dòng)又會(huì)包含以下幾個(gè)步驟：
對(duì)照?qǐng)D片芭毙，你可以看到在啟動(dòng)環(huán)節(jié)筋蓖，iOS和Android兩端存在一定差異， 但主流程基本是一致的退敦。首先通過(guò)入口視圖調(diào)用runApplation函數(shù)啟動(dòng)JS環(huán)境粘咖， JSC啟動(dòng)后由橋接對(duì)象負(fù)責(zé)在子線程實(shí)例化所有的module，所謂的Module侈百，主要是指RN中可被JS端直接使用的自定義視圖或代碼塊瓮下，這里我們主要說(shuō)視圖Module翰铡，也就是ViewModules， module實(shí)例化完成后由JS端的render函數(shù)主動(dòng)發(fā)起渲染并且加載到原生視圖上讽坏。
對(duì)于iOS來(lái)講在JavaScript Core啟動(dòng)完成后會(huì)創(chuàng)建用于真實(shí)渲染的父視圖畫布锭魔，所有由JS端繪制的視圖都會(huì)被添加在這個(gè)畫布上而不是直接繪制在用戶手動(dòng)創(chuàng)建的入口視圖上，但是對(duì)于Android而言路呜，用戶手動(dòng)創(chuàng)建的入口視圖則直接承擔(dān)繪制RN視圖的角色迷捧，iOS和Android兩端在畫布創(chuàng)建的同時(shí)都會(huì)生成一個(gè)RootTag用來(lái)做RootView的標(biāo)識(shí)，JS端在發(fā)起渲染請(qǐng)求時(shí)也會(huì)攜帶這個(gè)RootTag胀葱，用來(lái)標(biāo)識(shí)想要被添加到的RootView漠秋，
而在子線程，當(dāng)runApplication執(zhí)行完成后抵屿， 橋接對(duì)象會(huì)遍歷所有標(biāo)記導(dǎo)出的module模塊并且進(jìn)行實(shí)例化創(chuàng)建庆锦，完成后會(huì)把完整的注冊(cè)列表，分配到到關(guān)鍵類RCTUIManager中轧葛。需要注意的是肥荔，對(duì)于iOS而言這些module在運(yùn)行初期就會(huì)被全量被加載到環(huán)境中，當(dāng)同時(shí)存在多個(gè)橋接對(duì)象時(shí)并不能做到按需加載朝群。
在導(dǎo)出module的同時(shí)燕耿，橋接對(duì)象也會(huì)導(dǎo)出所有支持的function和style列表， 比如createView姜胖， setChildren或者borderColor等CSS樣式誉帅。
那么到此階段為止我們有了空白的畫布， 所有支持調(diào)用的視圖列表右莱、方法列表和樣式列表蚜锨， 準(zhǔn)備階段就已經(jīng)完成了，接下來(lái)就是渲染階段了慢蜓。
渲染階段
在開始正式進(jìn)入渲染階段之前亚再，我們先了解一下與RN渲染相關(guān)的概念
首先來(lái)看圖片左側(cè)的實(shí)際視圖相關(guān)類，所有的對(duì)象都繼承于原生的View晨抡，這些RN視圖經(jīng)過(guò)橋接對(duì)象的實(shí)例化和UIManager的分發(fā)創(chuàng)建的氛悬，最終都將以原生View的方式顯示在視圖上。
而對(duì)于圖片左側(cè)虛擬dom來(lái)說(shuō)耘柱，它的基類就是我們的抽象類NSObject如捅，只負(fù)責(zé)邏輯處理。
實(shí)際視圖和虛擬dom是一一對(duì)應(yīng)關(guān)系调煎，我們?cè)跍?zhǔn)備階段創(chuàng)建的父視圖RCTRootContentView會(huì)對(duì)應(yīng)RCTRootShadowView節(jié)點(diǎn)镜遣， 其他viewModules則對(duì)應(yīng)RCTShadowView節(jié)點(diǎn)，各類shadowView的職責(zé)都是通過(guò) facebook的Yoga跨平臺(tái)布局框架在子線程進(jìn)行布局相關(guān)的計(jì)算士袄，并且更新實(shí)際視圖悲关。
這些實(shí)際視圖和虛擬dom最終都由我們的核心類RCTUIManager負(fù)責(zé)維護(hù)谎僻。
好了， 在了解到這些之后我們?cè)賮?lái)看一下RN的整體渲染流程
渲染流程大致流程分為這幾個(gè)核心節(jié)點(diǎn)寓辱， 首先原生觸發(fā)runApplication后會(huì)直接對(duì)初始化時(shí)設(shè)置的入口文件進(jìn)行render戈稿， render經(jīng)過(guò)diff比對(duì)后調(diào)用createInstance， 隨后進(jìn)入原生的createView方法去創(chuàng)建虛擬dom樹和實(shí)體視圖并且將其放入待渲染列表進(jìn)行維護(hù)讶舰，同時(shí)shadowView也會(huì)根據(jù)JS端設(shè)置的樣式做具體的樣式轉(zhuǎn)換，轉(zhuǎn)換完成后會(huì)主動(dòng)發(fā)起請(qǐng)求去更新實(shí)際視圖需了。
最后js端的createInstance函數(shù)會(huì)在合適的時(shí)機(jī)調(diào)用setChilder通知原生將實(shí)體視圖添加到界面上進(jìn)行渲染跳昼。
在此過(guò)程中，iOS和Android兩端的核心流程基本一致肋乍，這里我們就先拿iOS舉例鹅颊，一起來(lái)看看createView方法的具體實(shí)現(xiàn)。
可以看到這個(gè)方法接收四個(gè)參數(shù)墓造，
ReactTag 表示想要?jiǎng)?chuàng)建的view的tag標(biāo)識(shí),
viewName對(duì)應(yīng)啟動(dòng)時(shí)導(dǎo)出的ViewModules列表中的class名稱
rootTag則是這個(gè)子節(jié)點(diǎn)對(duì)應(yīng)的根視圖tag
props則包含視圖相關(guān)的布局信息堪伍。
除了方法的入?yún)⒅猓?我們來(lái)講解一下方法的具體實(shí)現(xiàn)：
首先在方法中會(huì)根據(jù)viewName去viewModules列表中獲取相關(guān)信息和對(duì)應(yīng)的實(shí)體類，并且創(chuàng)建對(duì)應(yīng)的shadowView觅闽，再根據(jù)rootTag來(lái)將子dom節(jié)點(diǎn)和root節(jié)點(diǎn)做關(guān)聯(lián)帝雇，生成視圖樹。
然后會(huì)去創(chuàng)建實(shí)體視圖類蛉拙，但要注意的是這里并沒有把視圖進(jìn)行實(shí)際渲染尸闸，只是放入渲染隊(duì)列進(jìn)行維護(hù)等待JS端調(diào)用渲染。
最后會(huì)把視圖相關(guān)的props傳給虛擬dom去做轉(zhuǎn)換處理孕锄，轉(zhuǎn)換完成后由虛擬dom通知視圖進(jìn)行樣式更新吮廉。
在這個(gè)過(guò)程中需要進(jìn)行的樣式轉(zhuǎn)換也分為兩部分：布局轉(zhuǎn)換和CSS樣式轉(zhuǎn)換， 布局轉(zhuǎn)換交由yoga框架完成畸肆， CSS樣式轉(zhuǎn)化由RN自己完成宦芦，在實(shí)際轉(zhuǎn)換時(shí)會(huì)交由子類dom去做具體的個(gè)性化處理，也就是說(shuō)如果我們有自定義布局或拓展布局語(yǔ)法的需求可以通過(guò)繼承shadowView這種方式去完成轴脐。
簡(jiǎn)言之在調(diào)用createView后原生端會(huì)去創(chuàng)建真實(shí)渲染的view和其對(duì)應(yīng)的虛擬dom调卑，并且維護(hù)dom樹，完成view樣式的轉(zhuǎn)換大咱，最后維護(hù)渲染隊(duì)列等待渲染令野。
同樣的， 實(shí)際渲染請(qǐng)求也一樣是由JS發(fā)起的徽级，在上一步render調(diào)用棧的completeWork函數(shù)中會(huì)調(diào)用setChildren方法气破，去通知原生批量渲染。setChildren同樣有兩個(gè)參數(shù)containerTag和reactTags餐抢，表示根視圖和子視圖现使。原生會(huì)根據(jù)之前維護(hù)的虛擬dom和待渲染隊(duì)列去對(duì)這些視圖進(jìn)行批量添加渲染低匙。到此，一個(gè)JavaScript XML描述的組件得以用原生視圖的方式展現(xiàn)在界面上碳锈。
總結(jié)
好了顽冶，今天的內(nèi)容就分享到這，最后我們?cè)儆靡粋€(gè)時(shí)序圖來(lái)總結(jié)一下整個(gè)渲染流程
首先原生端啟動(dòng)APP售碳，激活JS環(huán)境强重。
然后，主線程創(chuàng)建RN根視圖贸人，橋接對(duì)象在子線程實(shí)例化并導(dǎo)出所有支持JS使用的viewModuels以及props间景、method等。
環(huán)境啟動(dòng)完成后艺智，JS端由入口文件發(fā)起render觸發(fā)渲染倘要，經(jīng)由一系列diff判斷及處理，最終在ReactNativeRenderer中調(diào)用原生UIManager的createView函數(shù)創(chuàng)建實(shí)際視圖和虛擬dom十拣，并且維護(hù)渲染隊(duì)列以及dom樹封拧。
最后，Renderer內(nèi)部觸發(fā)去主動(dòng)調(diào)用setChildren夭问，通知原生將待渲染隊(duì)列中的對(duì)象在主線程批量添加到視圖層進(jìn)行渲染泽西。
好了，現(xiàn)在我們知道在創(chuàng)建根視圖后會(huì)進(jìn)入JS的代碼渲染邏輯缰趋，并且兩端通過(guò)JSC在JS線程中頻繁通信用來(lái)更新dom樹尝苇，最后切換到主線程進(jìn)行批量渲染。那么對(duì)于頁(yè)面視圖數(shù)量多埠胖、渲染層級(jí)深糠溜、渲染次數(shù)多、線程切換頻繁的重量級(jí)頁(yè)面直撤，可能帶來(lái)的掉幀卡頓風(fēng)險(xiǎn)我們應(yīng)該如何進(jìn)行規(guī)避呢非竿？與原生類似，我們?cè)赗N中也可以采用常見的優(yōu)化手段——預(yù)加載來(lái)規(guī)避這些問(wèn)題谋竖。具體怎么做呢红柱？近期會(huì)對(duì)React Native預(yù)加載方案做具體分享。
