React-Native原理及生命週期

React-Native原理及組件生命週期

原理概述

React Native 不是黑科技，咱們寫的代碼老是以一種很是合理，能夠解釋的方式的運行着，只是絕大多數人沒有理解而已。接下來咱們以android 平臺爲例，簡單的解釋一下 React Native 的原理。

1. 首先要明白的一點是，即便使用了 React Native，咱們依然須要 andriod平臺的相關組件框架，調用的是 java代碼。總之，JavaScript 只是輔助，它只是提供了配置信息和邏輯的處理結果。React Native 與 Hybrid 徹底沒有關係，它只不過是以 JavaScript 的形式告訴 java 該執行什麼代碼。

2. 其次，React Native 可以運行起來，全靠 java和 JavaScript 的交互。對於沒有接觸過 JavaScript 的人來講，很是有必要理解 JavaScript 代碼如何被執行。

咱們知道 C 系列的語言，通過編譯，連接等操做後，會獲得一個二進制格式的可執行文，所謂的運行程序，實際上是運行這個二進制程序。 而 JavaScript 是一種腳本語言，它不會通過編譯、連接等操做，而是在運行時才動態的進行詞法、語法分析，生成抽象語法樹(AST)和字節碼，而後由解釋器負責執行或者使用 JIT 將字節碼轉化爲機器碼再執行。整個流程由 JavaScript 引擎負責完成。而React Native採用的js引擎就是著名的javascriptCore引擎，至於js引擎的介紹能夠參考 js引擎介紹

文字說了一大堆，可能還不如大佬們畫的一張圖：

啓動流程圖：

大佬們的圖仍是有些複雜，對於初入門的小白來講，下圖或許更合適

經過上圖不難看出，通訊的核心部分就是Bridge和Webkit這兩塊東西了。

組件生命週期

1. 說幾個比較重要的方法：

   • constructor()：通常在構造函數中初始化state；
   • componentDidMount()：該方法在render()方法後自動調用，網絡請求通常放在這個方法中
   • shouldComponentUpdate()：該方法返回一個boolean值，用來決定是否須要從新渲染組件，默認返回true，你能夠本身重寫此方法，經過條件判斷來決定你是否須要更新組件
   • componentWillUnmount()：在組件被移除前調用，在該方法中，釋放一些不須要的資源，好比中止定時器

2. 學習了3種定義組件的方法

• ES6方式定義，也就是如今最經常使用的方法，經過繼承Component，目前也比較推薦該方法
• ES5方式定義，看視頻是能夠的，可是我本身寫的時候，在運行時報錯，還沒有找到緣由，因此就不貼代碼了，我搞明白了後再補充
• 經過函數式的方法來定義。這種方式定義出來的組件是無狀態的，即沒有state，也不能使用this，由於沒有this指針。並且由於它自己就是一個函數，因此組件沒有完整意義的生命週期方法