RN 的機制就是所有代碼苗傅,包括底層代碼和業(yè)務代碼诽表,默認都打成一個 bundle 包
這個 bundle 包就會面臨著加載速度的問題胰挑。
下載速度也是問題,沒壓縮500多 k杠纵,壓縮100多荠耽,還是不包含業(yè)務代碼的情況下。
命令行打包工具支持 unbundle比藻,但是 iOS 還是一個大 bundle铝量,因為 iOS 加載多個小文件速率有問題倘屹。
優(yōu)化有兩個方向
一、拆分 js 模塊慢叨,拆分出通用底層模塊和業(yè)務模塊纽匙,底層模塊預先加載。
問題:
如果每個業(yè)務創(chuàng)建一個 js 引擎插爹,那么就會創(chuàng)建多個 js 引擎哄辣,那么就會面臨著內存占用多的問題。
二赠尾、復用 js 引擎
js 執(zhí)行引擎只是一種通信機制力穗,因此其實一個就夠了,可以想辦法復用起來气嫁。
第一步就是把 init rootview 和 init bridge 拆分当窗,也就是把引擎和界面拆分。
輸入了JSBundle以后寸宵,整個JS環(huán)境就已經(jīng)完全配置完畢崖面,ready就位了,但是并不會真正開始繪制界面梯影。
我們的 app巫员,現(xiàn)有狀況決定了不可能以單一RCTRootView去實現(xiàn)整個APP功能,注定了大部分保留現(xiàn)有native和 h5混搭功能甲棍,個別動態(tài)性較強的新功能又追求性能的情況下可以采用ReactNative去開發(fā)
所以打算采用的是多RCTRootView得方式简识,創(chuàng)建一個RNViewController類,這個類內部有一個RCTRootView當做界面感猛,但是整個RNViewController被當做其他natve的UIViewControler一樣七扰,去push,去present陪白,去pop
可以讓所有的RCTRootView共享同一個RCTBridge颈走,整個RCTBridge的初始化流程還是相當?shù)膹碗s,挺耗性能的咱士,既然是一個JS環(huán)境立由,干脆所有的RootView用同一個RCTBridge
在app啟動的時候,就創(chuàng)建初始化整個JS環(huán)境RCTBridge序厉,等到用戶要點擊彈出RN頁面的時候锐膜,再去構建RCTRootView,使用initWithBridge的方式脂矫。
創(chuàng)建RCTRootView的時候如果bridge已經(jīng)搭建完畢,JS環(huán)境已經(jīng)就位霉晕,那么就會直接出發(fā)bundleFinishedLoading庭再,如果JS環(huán)境沒有就位捞奕,那么就會等待JS環(huán)境運行完畢Ready后,通過通知觸發(fā)bundleFinishedLoading拄轻。
- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
...
[_contentView removeFromSuperview];
_contentView = [[RCTRootContentView alloc] initWithFrame:self.bounds
bridge:bridge
reactTag:self.reactTag
sizeFlexiblity:_sizeFlexibility];
[self runApplication:bridge];
_contentView.backgroundColor = self.backgroundColor;
_contentView.passThroughTouches = _passThroughTouches;
[self insertSubview:_contentView atIndex:0];
...
}
本質上 Bridge只是通信機制颅围,那么如何標明這個請求來自哪個 rootview 呢?通信機制只包含了調用方法的必要信息恨搓,缺乏上下文信息院促。
一般來說,一個 rootview 代表了一個模塊斧抱,缺乏上下文信息也能正常使用常拓。但一些情況下,就是識別這個請求發(fā)自哪個 rootview 了辉浦。
可以在JS調用前弄抬,可以通過findNodeHandle(this)._hostContainerInfo._tag 找到component所在的rootViewTag,把這個tag隨著API的參數(shù)一起發(fā)過來宪郊,然后直接通過RCTBridge.uimanager的方法獲取RCTUIManager掂恕,從而查找整個_viewRegistry[tag]表,識別JSCall來自哪個RootView弛槐。
關于集成效果懊亡,可以去應用市場搜索我們開發(fā)的應用“樂車邦”來體驗RN 的感覺。
好了乎串,這系列文章算是告一個段落了店枣,各位看官過癮了沒?