React Native 原理

React Native簡介

React Native是一個創建在JavaScript和React上用於構建本地應用的框架,它具備React和JavaScript類似的代碼風格，編寫一次能夠運行在多個平臺之上（>= Android 4.1 (API 16) and >= iOS 8.0），而且有着強大的社區。

React Native 結構

主要分爲三個部分：

• Native Code對應着原生代碼，例如android的原生Java代碼，ios的原生C++代碼

• Bridge用於將JS和原生Native Code鏈接起來

• JS VM用於運行JS代碼，React Native採用的是JavaScriptCore,在Android上，須要應用本身附帶JavaScriptCore，Ios上JavaScriptCore屬於系統的一部分，不須要應用附帶。

React Native線程模型

React Native應用中存在三個線程隊列，它們工做的流程大概以下：UI Event Queue觸發事件，經過Bridge調用JS代碼在JS Event Queue中運行，JS運行後將視圖更新分發給Native Module Event Queue中的線程,Native Module Event Queue負責計算，而後將最後的結果交給UI Event Queue中的線程去更新。 其中UI Event Queue爲主線程。

Modules

React Native中有一個基本的概念就是模塊，一個模塊有狀態和方法，咱們能夠經過JS調用一個Module,如上圖中以Android爲例，能夠經過JS調用Dialog module,而後轉化成原生代碼對應的是Android中的DialogModule。

View Managers

React Native中的另外一個概念是組件，一個組件能夠經過映射關係和原生的API相對應，咱們也能夠自定義組件，例如上圖中的<Text/>和原生代碼中的 new TextView(getContext())相對應。

JavaScript對象和原生代碼交互

JavaScript對象能夠和原生對象之間相互調用，關係如上圖。

JavaScript和本地代碼間的通訊

其中通訊的特色是：

• 異步的

• 序列化的

• 批量的，對於大批量的通訊事件能夠將其分紅幾部分，減小時間延遲

參考：http://www.reactnative.com/un...