native react 中 JavaScript 和 naitive 的通訊機制（1）
bridge_future-5.jpg
作為一個 JavaScript 開發人員，在開發 native react 時候我們可能沒有必要關心如何寫naitive 程式碼。但是的確有必要了解 JavaScript 與native 程式碼是如何建立關係的。
mainImage-full-4226771.jpg
那麼許多場景需要我們去接觸一些 native 程式碼，
- 需要整合第三方 SDK
- 如果您應用追求高效能
這時候需要自己寫一些 native 模組來實現最求效能的目的 - 正在構建是需要一定相容性的應用
- 需要呼叫平臺的系統 API
有時候我們不想用現有的模組來實現呼叫平臺系統的 API 時候，也需要開發原生模組。
當然瞭解一些react native 內部機制無疑是有意開發 react native
下面圖是 react native 執行緒結構圖，在 native 這一側，Main(主執行緒）為 UI 執行緒，shadow queue 這個執行緒負責位置的計算，更重要的是每一模組都有自己執行緒為 Native Modules。在 JavaScript 這一側我們有 JavaScript 的執行緒，native 和 js 是可以進行執行緒通訊的。
018.JPG
這個 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 進行傳遞
019.JPG
這些資訊包括建立檢視，進行網路請求，重新渲染元件等等。這是為什麼我們瞭解 bridge 的重要性。所有經過 bridge 的通訊都是非同步的，所以通訊都是通過方法以及方法回撥來實現的。另一個值得我們注意的所有資訊需要進行序列化後才可以進行傳遞。而且是批量進行的這樣可以提高效能。
020.JPG
其實這種通訊和客戶端和服務端進行通訊很像。所有這些訊息都是由訊息佇列來處理的。native 持有訊息佇列，響應於 javascript。JavaScript 是影響效能的重點，當訊息從訊息佇列來 JavaScript 這一側，我們應該確保 Javascript 不阻塞，從而不會引起訊息佇列的擁堵。
traffic-hotspots.jpg