reactnativejs

① React 、React.js、React Native三者關系

React：
React 是基礎框架，是一套基礎設計實現理念，開發者不能直接使用它來開發移動應用或者網頁。
React.js:
在React框架之上，發展出了React.js 框架來開發網頁。
React Native：
在React框架之上，發展出來React Native 用來開發移動應用。

ps：因為React 基礎框架與React.js框架是同時出現、同時進化發展的，這就造成了React基礎框架的基本概念、設計思想都是在React.js的相關文檔中描述的。後來，Facebook退出了React Native 後，也沒有把React的相關概念文檔從React.js文檔中分離出來。這就導致出現了學React Native 要去看React.js文檔，說React Native 不時會說到React.js的情況。

② React Native JSBundle拆包之原理篇

React Native JSBundle拆包原理主要包括以下幾點：

1. 打包方式優化：

   • 早期React Native的jsbundle打包方式包含了所有代碼，包括RN源碼、第三方庫和自定義業務代碼。
   • 為了解決代碼重復和內存佔用問題，開發者將重復的RN代碼和第三方庫打包成基礎包，各業務在此基礎上開發，形成業務包。這種方式降低了內存佔用，減少了載入時間，並優化了熱更新流量帶寬。

2. 拆包工具：

   • molespacker：由攜程框架團隊研發，適用於RN0.4.0版本之前的分包，但維護成本較低，使用人數不多，兼容性相對較差。
   • diff patch：通過比較兩個版本的jsbundle，生成業務包，實現基礎包和業務包的分離。這一方法主要使用googlediffmatchpatch等工具。
   • metro bundle：由facebook官方提供，從RN 0.50版本引入，並隨著RN版本的迭代不斷完善。它支持差分包熱更新，配置時主要關注createMoleIdFactory和processMoleFilter等參數。

3. 啟動流程與載入機制：

   • JS端啟動：以index.js為默認入口，通過AppRegistry.registerComponent方法注冊應用，原生系統載入應用代碼包並最終運行應用。
   • Android端啟動：MainActivity作為原生層入口，繼承自ReactActivity，通過MainApplication類初始化ReactActivityDelegate，載入應用並執行啟動過程。
   • ReactActivityDelegate：負責啟動應用的關鍵步驟，包括載入應用、生成上下文對象、注冊模塊、創建CatalystInstance，並與ReactApplicationContext關聯，最終載入JSBundle文件。
   • JSBundleLoader：用於存儲JS包信息，允許CatalystInstance載入正確的JS包，實現JS和Java層面的相互調用。

4. JSBundle的載入與顯示：

   • 在ReactContext創建完畢後，通過UIManagerMole將JS組件轉換成Android組件，並顯示在ReactRootView上。

總結：React Native的JSBundle拆包機制通過優化打包方式、使用不同的拆包工具以及精細的啟動流程和載入機制，實現了代碼的優化和熱更新的高效執行。這一機制確保了React Native應用在跨平台開發過程中的靈活性和性能優化。

③ ReactJS到React-Native，架構原理概述

ReactJS到ReactNative的架構原理概述如下：

1. ReactJS的核心原理： 虛擬DOM：ReactJS通過引入虛擬DOM的概念，在內存中構建DOM模型，並通過計算虛擬DOM與實際DOM之間的差異來高效地進行DOM更新，從而優化渲染性能。 高效更新機制：ReactJS能夠高效地計算出最小的DOM更新集，顯著減少對瀏覽器資源的消耗。

2. React Native的跨平台特性： 基於React的擴展：React Native是基於React的跨平台UI框架，使用JavaScript構建原生應用。 調用原生API：React Native通過調用宿主平台的原生API來渲染UI組件，實現原生應用的性能和用戶體驗。

3. 渲染過程與組件生命周期： 渲染機制差異：React Native的渲染過程依賴於橋接，JavaScript通過橋接調用宿主平台的基礎API和UI元素。 組件生命周期：React Native的組件生命周期與ReactJS基本相同，但渲染過程有所不同。

4. 樣式布局與組件編寫： Yoga布局引擎：React Native使用Yoga這個跨平台的CSS3/Flexbox布局引擎，提供簡單且一致的樣式語言來布局UI元素。 組件編寫方式：React Native的組件編寫方式與HTML有所不同，但可以復用Web開發的經驗，如View組件類似於div標簽，Text組件類似於p標簽。

5. 交互、動畫與導航： 交互與動畫：React Native提供Animated API和PanResponder等支持組件的動態效果和手勢交互。 導航管理：通過Navigator組件提供簡單直觀的方式來管理應用中的頁面和屏幕跳轉。

6. 與原生平台的交互： 橋接機制：React Native與原生平台的交互通過橋接實現，負責將JavaScript代碼與宿主平台的原生代碼進行溝通，確保應用的性能和穩定性。

綜上所述，從ReactJS到React Native，開發者能夠利用相同的JavaScript代碼庫構建出跨平台的原生應用，同時享受到React提供的高效、響應式和可復用的UI構建方式。