native react 中 JavaScript 和 naitive 的通訊機制(1)

作爲一個 JavaScript 開發人員,在開發 native react 時候我們可能沒有必要關心如何寫naitive 代碼。但是的確有必要了解 JavaScript 與native 代碼是如何建立關係的。


那麼許多場景需要我們去接觸一些 native 代碼,

  • 需要整合第三方 SDK
  • 如果您應用追求高性能
    這時候需要自己寫一些 native 模塊來實現最求性能的目的
  • 正在構建是需要一定兼容性的應用
  • 需要調用平臺的系統 API
    有時候我們不想用現有的模塊來實現調用平臺系統的 API 時候,也需要開發原生模塊。

當然瞭解一些react native 內部機制無疑是有意開發 react native

下面圖是 react native 線程結構圖,在 native 這一側,Main(主線程)爲 UI 線程,shadow queue 這個線程負責位置的計算,更重要的是每一模塊都有自己線程爲 Native Modules。在 JavaScript 這一側我們有 JavaScript 的線程,native 和 js 是可以進行線程通訊的。


這個 json 對象表示 native 的模塊

{
  moduleName:'ExampleModule',
  constants: {},
  methods:['chainReact','bridgingIsAwesome'],
  promiseMethods:[0],
  syncMethods[1]
}

在運行時 JavaScript 是掌握所有 native 模塊,這些模塊會以全局變量的形式被注入到 VM 的 JavaScript (context)上下文對象。現在可能你可能會感覺到一些困惑,相信隨着分享進一步深入,你會了解的更多。記住上面這個 json 對象表示一個 native 的模塊,

讓我們深入看一下 react native 內部機制,當用戶觸摸屏幕進行操作,觸摸事件從 native 側發起,通過 bridge 將觸摸信息從 native 傳遞給 JavaScript ,然後 javascript 對信息進行反饋,所有信息都是經過 bridge 進行傳遞



這些信息包括創建視圖,進行網絡請求,重新渲染組件等等。這是爲什麼我們瞭解 bridge 的重要性。所有經過 bridge 的通訊都是異步的,所以通訊都是通過方法以及方法回調來實現的。另一個值得我們注意的所有信息需要進行序列化後纔可以進行傳遞。而且是批量進行的這樣可以提高性能。


其實這種通訊和客戶端和服務端進行通訊很像。所有這些消息都是由消息隊列來處理的。native 持有消息隊列,響應於 javascript。JavaScript 是影響性能的重點,當消息從消息隊列來 JavaScript 這一側,我們應該確保 Javascript 不阻塞,從而不會引起消息隊列的擁堵。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章