React Native的極簡手冊

標籤：

安裝入門可以參考：React Native官方文檔（http://reactnative.cn/docs/0.31/tutorial.html#content）。

 

NodeJS知識儲備：參考《NodeJS入門》（https://leanpub.com/nodebeginner-chinese）。（尊重知識，請購買原版）。

 

書籍：《React Native入門與實戰》

 

程式碼範例：30天學習React Native教程（https://github.com/fangwei716/30-days-of-react-native）

 

看到這裡，對React Native的使用就有了一些認識了。

 

 2   React and React Native and NodeJS

 

React 是由Facebook開發出來的用於開發使用者互動介面的JS庫。其源碼由Facebook和社區優秀的程式員維護。React帶來了很多新的東西，例如組 件化、JSX、虛擬DOM等。其提供的虛擬DOM使得我們渲染組件呈現非常之快，讓我們從頻繁操作DOM的繁重工作之中解脫。它做的工作更多偏重於MVC 中的V層，結合其它如Flux等一起，你可以非常容易構建強大的應用。

 

React 的世界裡，一切都是組件。你可以構建任何直接的HTML沒有的組件，例如下拉式功能表、導覽功能表等。同時，組件裡也可以包含其它組件。每一個組件都有一個 render方法，用於呈現該組件。同時，每一個組件都有屬於自己的scope，從而與其它的組件界定開來，用於構建屬於該組件的方法，以方便複用（app開發ty300.com）。 JSX是基於JS的擴充，它允許你在JS裡直接寫HTML的代碼，而不用像我們過去一樣要想在JS裡寫HTML不得不拼接一大堆的字串。React不直 接操作DOM，頻繁的操作DOM會非常影響效能和體驗。React將DOM結構儲存在記憶體中，與render方法的傳回值進行比較，通過其自由的diff 演算法計算出不同的地方，然後反應到真實的DOM當中。也就是說，大多數情況我們渲染組件、更改組件狀態等都是操作的虛擬DOM，只有在有所改變的情況下， 才會反應到真實的DOM當中。React Native基於ReacJS，把 React 編程模式的能力帶到移動開發,用來開發iOS和Android原生應用.

 

NodeJs 是基於JavaScript的,可以做為後台開發的語言. 提供了很多系統級的API，如檔案操作、網路編程等. 用事件驅動, 非同步編程,主要是為後台網路服務設計.React Native 藉助 Node.js，即 JavaScript 運行時來建立 JavaScript 代碼。

 

總結來說，React Native使用NodeJS來做系統處理，使用React來渲染。

 

 3   構建原理

 

在AppDelegate.m裡，找到

application:didFinishLaunchingWithOptions：

 

在這個方法中，主要做了幾件事：

• 定義了 JS 代碼所在的位置，它在 dev 環境下是一個 URL，通過 development server 訪問；在生產環境下則從磁碟讀取，當然前提是已經手動產生過了 bundle 檔案；

• 建立了一個 RCTRootView 對象，該類繼承於 UIView，處理常式所有 View 的最外層；

• 調 用 RCTRootView 的 initWithBundleURL 方法（入門教程qkxue.net）。在該方法中，建立了 bridge 對象。顧名思義，bridge 起著兩個端之間的橋接作用，其中真正工作的是類就是大名鼎鼎的 RCTBatchedBridge。RCTBatchedBridge 是初始化時通訊的核心，我們重點關注的是 start 方法。在 start 方法中，會建立一個 GCD 線程，該線程通過串列隊列調度了以下幾個關鍵的任務。

 

RCTRootView 用於載入 JavaScript 應用以及渲染最後的視圖的。當應用開始啟動並執行時候，RCTRootView將會從以下的URL中載入應用：

http://localhost:8081/index.ios.bundle

 

重 新調用了你運行這個App時開啟的終端視窗，它開啟了一個 packager 和 server 來處理上面的請求。在 Safari 中開啟那個 URL；你將會看到這個 App 的 JavaScript 代碼。你也可以在 React Native 架構中找到你的代碼。當你的App開始運行了以後，這段代碼將會被載入進來，然後 JavaScriptCore 架構將會執行它。在程式裡，它將會載入 功能 組件，然後構建出原生的 UIKit 視圖。JavaScript應用運行在模擬器上，使用的是原生UI，沒有任何內嵌的瀏覽器。應用程式會使用 React.createElement 來構建應用 UI ,React會將其轉換到原生環境中。

 

當 UI 渲染出來後,render 方法會返回一顆視圖渲染樹,並與當前的 UIKit 視圖進行比較。這個稱之為 reconciliation 的過程的輸出是一個簡單的更新列表, React 會將這個列表應用到當前視圖。只有實際改變了的部分才會重新繪製。即ReactJS獨特的——virtual-DOM(文件物件模型,一個web文檔的視 圖樹)和 reconciliation概念。

 

 4   組件的生命週期

 

組件的生命週期分成三個狀態：

• Mounting：已插入真實 DOM

• Updating：正在被重新渲染

• Unmounting：已移出真實 DOM

 

React 為每個狀態都提供了兩種處理函數，will 函數在進入狀態之前調用，did 函數在進入狀態之後調用，三種狀態共計五種處理函數。

• componentWillMount()

• componentDidMount()

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• componentWillUnmount()

 

此外，React 還提供兩種特殊狀態的處理函數。

componentWillReceiveProps(object nextProps)：已載入組件收到新的參數時調用

shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

 

這些方法的詳細說明，可以參考官方文檔。

 

另外一個需要關注的點是，組件的style屬性的設定方式不能寫成

style="opacity:{this.state.opacity};"

 

而要寫成

style={{opacity: this.state.opacity}}

 

這是因為 React 組件樣式是一個對象，所以第一重大括弧表示這是 JavaScript 文法，第二重大括弧表示樣式對象。

稿源：勤快學QKxue.nET

更多React Native的極簡手冊介紹

React Native的極簡手冊