“每次滑動(dòng)列表,你的界面都在等一串JSON穿過(guò)一座窄橋。”這句抱怨在2018年前后的React Native社區(qū)流傳甚廣。
那時(shí),JavaScript與原生代碼之間所有的交互,都必須經(jīng)過(guò)一個(gè)叫“Native Bridge”的中間層:JS側(cè)把指令序列化成JSON字符串,異步扔過(guò)橋;原生側(cè)接到后解碼、執(zhí)行,再把結(jié)果同樣打包回來(lái)。這個(gè)異步過(guò)程成為歷史性能瓶頸的根源——大量跳幀、手勢(shì)延遲,都源于那座橋。
![]()
舊橋的三個(gè)硬傷
一是串行化的開(kāi)銷(xiāo)。最簡(jiǎn)單的原生方法調(diào)用,也得套上JSON的殼,移動(dòng)端CPU對(duì)字符串解析本就不如二進(jìn)制友好。
二是強(qiáng)制異步。即便原生操作可以瞬間完成,JS線(xiàn)程也必須等待下一輪消息循環(huán),無(wú)法同步取回結(jié)果,這給動(dòng)畫(huà)和手勢(shì)等需要立即反饋的場(chǎng)景埋下性能坑。
三是類(lèi)型信息的丟失。JSON只傳遞值,方法的類(lèi)型簽名、內(nèi)存指針全部抹平,使得引擎無(wú)法做編譯期優(yōu)化。正因如此,React Native團(tuán)隊(duì)在架構(gòu)演進(jìn)決策中將這座橋標(biāo)記為“必須替換的遺產(chǎn)”。
新架構(gòu)的回應(yīng):JSI把指針直接交給JS
反方的聲音來(lái)自2022年逐步亮相的新架構(gòu)。React Native 0.68版本首次以實(shí)驗(yàn)性特性引入了JSI(JavaScript Interface),隨后TurboModule與Fabric渲染器接過(guò)接力棒。JSI的核心改變是:不再把一切轉(zhuǎn)成JSON,而是讓JS線(xiàn)程持有C++對(duì)象的直接引用。這意味著調(diào)用原生方法時(shí),JS可以直接操作一塊共享內(nèi)存,無(wú)需序列化、無(wú)需跨線(xiàn)程的消息投遞。用一句話(huà)總結(jié)就是:過(guò)去是“發(fā)電報(bào)”,現(xiàn)在是“直連內(nèi)存”。
這一轉(zhuǎn)變帶來(lái)的結(jié)果,首先是同步執(zhí)行成為可能。原先需要幾次橋接來(lái)回的操作,現(xiàn)在可以在一次C++調(diào)用里完成,動(dòng)畫(huà)幀的調(diào)度不再受異步延遲拖累。其次是省去了重復(fù)的序列化耗時(shí),尤其是在列表快速滾動(dòng)、頻繁測(cè)量布局的極耗場(chǎng)景下,CPU負(fù)載明顯下降。相關(guān)測(cè)量顯示,在同等機(jī)型上,使用Fabric渲染器的長(zhǎng)列表幀率比舊橋高出約30%,這正是“零拷貝”通信的紅利。
你的代碼需要換一種寫(xiě)法
不過(guò),舊橋的“死亡”對(duì)于開(kāi)發(fā)者而言,意味著編碼模式的一次重要切換。過(guò)去當(dāng)你需要訪(fǎng)問(wèn)一個(gè)還沒(méi)有內(nèi)置封裝的原生能力——比如第三方的藍(lán)牙SDK,或者打算復(fù)用已有Swift/Kotlin業(yè)務(wù)邏輯時(shí),你得手動(dòng)搭建一個(gè)Native Module,編寫(xiě)橋接代理類(lèi)。在JSI時(shí)代,這份工作變成了創(chuàng)建TurboModule:你需要用C++(或通過(guò)代碼生成工具)定義接口,讓JS直接持有原生方法的句柄。UI層面的自定義組件也從舊式的橋接方式轉(zhuǎn)向Fabric的原生組件注冊(cè)。本質(zhì)上,你不再是發(fā)JSON的“通信工程師”,而是管理C++引用計(jì)數(shù)的“內(nèi)存擺渡人”。
這場(chǎng)從異步JSON到同步JSI的演進(jìn),并非一夜之間強(qiáng)制完成。從0.68引入可選開(kāi)關(guān),到后續(xù)版本逐步把TurboModule和Fabric設(shè)為默認(rèn),社區(qū)給了長(zhǎng)達(dá)兩三年的過(guò)渡期。如今新建一個(gè)React Native項(xiàng)目,默認(rèn)啟動(dòng)的就是新架構(gòu),舊橋代碼雖然仍能在兼容模式下跑,但其角色已從“核心通路”退化為“被容忍的遺民”。如果你正在維護(hù)一個(gè)存量的老項(xiàng)目,把橋代碼遷移到TurboModule已經(jīng)不再是可選項(xiàng),而是決定未來(lái)能不能跟上主版本升級(jí)的硬門(mén)檻。
“React Native橋已死”這個(gè)說(shuō)法其實(shí)有點(diǎn)標(biāo)題黨。嚴(yán)格來(lái)說(shuō),它變成了一層薄薄的兼容膠水,只在極少數(shù)尚未遷移的舊模塊里被喚醒。真正主導(dǎo)通信的,已經(jīng)是直接內(nèi)存操作。下一次你的手指在React Native頁(yè)面上滑動(dòng),流暢感的保障不再是那座窄橋,而是JSI在C++層穩(wěn)穩(wěn)托住每一幀。
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號(hào)”用戶(hù)上傳并發(fā)布,本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.