1. 程式人生 > >Facebook 正在重構 React Native,將重寫大量底層

Facebook 正在重構 React Native,將重寫大量底層

(點選上方公眾號,可快速關注)

來源:開源中國

www.oschina.net/news/97129/state-of-react-native-2018

Facebook 五年前為 React Native 框架設計的原則,負面影響了與 JavaScript 程式碼的整合程度,也加大了某些特性的開發難度。因此 Facebook 現在準備對 React Native 架構進行重構,通過引入更先進的架構,來提高 JavaScript 和混合開發中原生 API 的互通性。

640?

昨日,React 工程經理 Sophie Alpert 在其官方部落格上宣佈 Facebook 將要重構 React Native,使其更輕量,更具靈活性,更適應 JavaScript 生態圈的發展。

在部落格中 Sophie Alpert 表示,React Native 專案的設計初衷是成為 JavaScript 和原生應用之間的橋樑。React DOM 將 React 的狀態更新變成了命令式、可變的 DOM API 呼叫,如 document.createElement(attrs) 和 .appendChild(),而 React Native 則返回一個單獨的 JSON 訊息,它列出了要執行的一些操作,如 [["createView", attrs], ["manageChildren", ...]]。

他們將整個系統設計為永不依賴獲取同步響應,並確保該列表中所有的內容都可以完全序列化為 JSON,並且可以反序列化回來。這樣做是為了提升靈活性:在這個架構之上,能夠構建諸如 

Chrome 偵錯程式之類的工具,這些工具可以通過 WebSocket 連線非同步執行所有的 JavaScript 程式碼。

但在過去的 5 年裡,他們發現最初的設計原則加大了某些特性的開發難度。非同步橋接(asynchronous bridge)意味著不能直接將 JavaScript 邏輯與很多原生 API 整合在一起,因為這些原生 API 是同步的。

批量橋接(本地呼叫佇列)意味著 React Native 應用程式呼叫原生實現的函式會更加困難。而且序列化的橋接意味著不必要的複製,因為它不是直接在兩個世界之間共享記憶體。對於完全使用 React Native 構建的應用程式,這些限制通常是可承受的。

但對於在 React Native 與現有應用程式程式碼之間進行復雜整合的應用程式,情況則變得十分糟糕。

因此,Facebook 正在對 React Native 進行大規模重構,讓架構變得更加靈活,並更好地與混合 JavaScript/原生應用開發中的原生基礎設施整合。

通過這個專案,他們將應用在過去 5 年中學到的知識,逐步讓架構更現代化。他們正在對 React Native 內部進行大量的重寫,當然大部分工作都是在底層進行的,所以現有的 React Native 應用程式幾乎不需要做出更改。

為了使 React Native 更輕量化並能更好地適應現有的原生應用,此次重構主要從三個方面進行:

  • 首先,改變執行緒模型。UI 更新不再需要在三個不同的執行緒上執行,而是可以在任意執行緒上同步呼叫 JavaScript 進行優先更新,同時將低優先順序工作推出主執行緒,以便保持對 UI 的響應

  • 其次,將非同步渲染功能引入 React Native 中,允許執行多個渲染並簡化非同步資料處理

  • 最後,簡化橋接,讓它更快、更輕量。原生和 JavaScript 之間的直接呼叫效率更高,並且可以更輕鬆地構建除錯工具,如跨語言堆疊跟蹤

完成以上工作之後,有可能帶來更緊密的整合。現在,不通過複雜的 hack 手段就無法讓原生導航和手勢處理或原生元件(如 UICollectionView 和 RecyclerView)一起工作。但在對執行緒模型做出更改之後,開發者構建這樣的功能將會非常簡單。

Sophie Alpert 最後說到,他們的目標是希望 React Native 在 JavaScript 端能夠更加輕量,以更好地適應 JavaScript 生態系統。等今年晚些時候這個專案將要完工時,Facebook 會披露更多的細節,敬請期待。

【關於投稿】

如果大家有原創好文投稿,請直接給公號傳送留言。

① 留言格式:
【投稿】+《 文章標題》+ 文章連結

② 示例:
【投稿】《不要自稱是程式設計師,我十多年的 IT 職場總結》:http://blog.jobbole.com/94148/

③ 最後請附上您的個人簡介哈~

覺得本文對你有幫助?請分享給更多人

關注「前端大全」,提升前端技能

640?wx_fmt=png

640?wx_fmt=jpeg