React Native重構(gòu)即將完成，改善版本有何不同？

2015年，React Native被首次推出，使用ReactJS框架開發(fā)原生跨平臺應(yīng)用程序。該框架獲得了社區(qū)的大力支持，并憑借其Web同行的名聲逐漸普及，但其實該平臺的原始設(shè)計并非沒有缺點。

2018年，F(xiàn)acebook團(tuán)隊宣布他們正試圖解決多年來開發(fā)人員遇到的這些最常見問題，進(jìn)行ReactNative重構(gòu)。這樣的重構(gòu)改善體現(xiàn)在哪些方面呢？本文將從性能和開發(fā)速度方面來談一談。

原構(gòu)造

ReactNative曾被稱作“不依賴于平臺”的應(yīng)用框架。從某種程度上講，該框架的主要目標(biāo)是讓開發(fā)人員編寫Javascript React代碼，而React Native可以在幕后部署其機(jī)制，以將Reactreconciliation tree轉(zhuǎn)錄成可由原生基礎(chǔ)設(shè)施解釋的內(nèi)容。它能夠：

· 正確顯示UI

· 訪問原生功能

通常，Android/ iOS生態(tài)系統(tǒng)目前的機(jī)制如下所示：

每個React Native應(yīng)用程序中運行著3個并行線程：

· 陰影線程用來設(shè)計布局。它使用Facebook自帶的Yoga布局引擎來設(shè)計flexbox布局并將其發(fā)送回UI線程。

· JS線程讀取和編譯所有JavaScript代碼以及執(zhí)行應(yīng)用程序大部分業(yè)務(wù)邏輯。將所有Javascript代碼融匯到一個文件中，并翻譯任何其他Javascript語法（例如JSX或TS），然后將此代碼發(fā)送到JavaScriptCore引擎以便運行。

· 原生線程是運行原生代碼的位置。每當(dāng)需要更新UI或訪問本機(jī)函數(shù)時，它將與JS線程連接。它分為原生UI和原生模塊。原生模塊在啟動時都處于預(yù)備狀態(tài)，這意味著即使ReactNative使用藍(lán)牙模塊，該藍(lán)牙模塊也始終處于運行狀態(tài)。

使用橋接器可以連接JS線程和原生線程，在后臺，C++模塊圍繞一個異步隊列構(gòu)建。每當(dāng)它從任一方獲取數(shù)據(jù)時，都會將數(shù)據(jù)序列化為字符串并將其通過隊列傳遞，并在到達(dá)時反序列化。

這意味著所有線程都依賴于跨網(wǎng)橋傳輸?shù)漠惒絁SON消息，并且這些消息發(fā)送到任一端，期望它們在將來的某個時間引發(fā)響應(yīng)，但它還存在擁塞的風(fēng)險。

每當(dāng)瀏覽者在原生環(huán)境中拖動滾動條時，信息都會異步發(fā)送到JavaScript領(lǐng)域，但是原生環(huán)境不會等待Java腳本執(zhí)行工作并將其以另一種方式發(fā)送回去。這會造成延遲，屏幕上出現(xiàn)信息之前會一片空白。

同樣，布局設(shè)計需要經(jīng)過很多次才能在屏幕上顯示，因為在原生設(shè)計布局之前，它需要想盡辦法到達(dá)Yoga引擎，當(dāng)然這也意味著要通過橋接器。可以看到異步序列化來回發(fā)送JSON數(shù)據(jù)是怎樣造成性能問題的，但是如何使JavaScript與本機(jī)通信呢？這就要靠JSI發(fā)揮作用了。

新架構(gòu)

重構(gòu)版的ReactNative將逐漸棄用橋接器，轉(zhuǎn)而采用新元素——JavaScript接口（JSI）。JSI的一些改進(jìn)令人驚喜，首先就是JS軟件包不再依賴JSC。換句話說，現(xiàn)在可以輕松地將JSC引擎與其他（可能更高性能的）JavaScript引擎互換，例如V8。

第二個改進(jìn)針對的是這種新架構(gòu)的基礎(chǔ)：“通過使用JSI，JavaScript可以保存對C++主機(jī)對象的引用并對其調(diào)用方法。JavaScript和原生領(lǐng)域?qū)⒄嬲舜肆私?。?/p>

這也意味著JSI將允許所有線程之間完全互操作。通過共享所有權(quán)，JavaScript代碼可以直接從JS線程運行原生方法，不需要將要傳遞的消息序列化為JSON，這消除了橋接器上的所有擁塞和異步問題。

除了顯著改善不同線程之間的通信之外，這種新架構(gòu)還可以直接控制原生模塊。這意味著我們可以在需要時使用原生模塊，而不是在啟動時將它們?nèi)恳龑?dǎo)一次。這大大提高了性能，節(jié)省了啟動時間。

在掌握了C ++的強(qiáng)大功能的基礎(chǔ)上，懂得如何將React Native用于定位非常大的系統(tǒng)面板是很容易的。

推出這么多年，ReactNative已過時、待清理、需維護(hù)的部分已經(jīng)積攢很多了，React Native框架已經(jīng)清除了某些功能，諸如Webview或AsyncStorage之類的模塊正逐漸從React Native核心中移出，將轉(zhuǎn)變?yōu)樯鐓^(qū)管理的存儲庫。

憑借新的精簡核心模塊以及JavaScript代碼與原生代碼之間強(qiáng)大的互操作性機(jī)制，React Native重構(gòu)將實現(xiàn)許多性能改進(jìn)和更全方位的開發(fā)人員工作流。它計劃在2020年第四季度之前完成全面重組，更好的性能和全新開發(fā)體驗十分令人期待。