1.ReactNative源碼分析 - 概述
2.ReactNative源碼分析 - JavaScriptCore C語言篇
3.ReactNative源碼分析 - 啟動流程
4.ReactNative源碼分析 - 通信機制
5.ReactNative源碼分析 - 渲染原理
- 一、前言
- 1.ReactNative簡介
- 2.ReactNative技術棧
- 3.源碼閱讀建議
- 二、ReactNative代碼目錄分析
- 三、ReactNative項目架構分析
- 1.架構層次說明
- 2.ReactNative框架層分析
一、前言
- ReactNative本身代碼庫比較龐大，筆者這一系列文章主要從iOS端分析Native與JS兩端如何打通，如何實現渲染、通信。ReactNative使用到的相關第三方庫、技術棧會有所涉及，但不會做過多討論。
- 筆者接觸ReactNative時間算是比較晚的，做跨平臺開發不足一年，若文中出現錯誤，還請各路英雄指出。做ReactNative后感受是：跨平臺開發在特定的業務場景中有它獨到的優勢，能夠大幅度提高生產力，作為開發者還是得擁抱變化，據筆者所知在很多大廠已經在生成環境中大規模應用ReactNative。
- 本系列文章基于
react-native 0.59.4版本進行分析，按照技術點大致劃分，依次推進，建議按順序閱讀。JavaScriptCore是ReactNative的基石，因此會先通過“JavaScriptCore C語言篇”分析兩者的關系；啟動流程從原生app開始切入ReactNative源碼的地方分析；啟動流程完畢才具備Native&JS通信的能力，因此通信機制次之；渲染等功能是基于Native&JS通信機制來進行的，因此放到最后。
1.ReactNative簡介
- ReactNative是FaceBook發布的一個跨平臺開發框架，通過React來構建移動APP，旨在保留React開發效率與開發體驗的同時，達到Native應用的性能與用戶體驗。
- ReactNative有如下特點
- 聲明式：React使得它可以輕松創建聲明式UI，代碼更具可讀性、更易于調試；
- 組件化：基于組件化開發理念，創建具備狀態管理的組件，通過組件組合，可構建復雜UI；
- 便捷開發：本地調試工具使得JS代碼可實時重載，無需重新編譯APP即可看到實時效果；
- 跨平臺：具備跨平臺特性，一套代碼可用于iOS、Android平臺；
- 熱更新：支持動態更新js bundle包；
2.ReactNative技術棧
- ReactNative開發涉及到的技術棧大致如下
- 日常開發用到的組件/接口 ReactNative；
- 聲明式組件化開發框架 React；
- 語法 JavaScript、ES6；
- 布局知識 FlexBox；
- 包管理工具 npm/yarn；
- 大型項目可能還需要狀態管理庫 Redux；
3.源碼閱讀建議
- ReactNative源碼結構大致分三層：原生層（Objective-C/JAVA）、公共層（C++）、JS層，從iOS端閱讀源碼需具備知識體系如下：
- 熟悉Objective-C。由于源碼涉及多線程編程，需要掌握GCD、RunLoop線程保活等知識
- 熟悉JavaScript。
- 基本的C++面向對象知識。iOS原生層幾乎都是OC/C++混編；底層公共層是iOS/Android共用，純C++編寫。ReactNative使用了很多C++新特性，因此最好了解C++11
- ReactNative啟動流程從
RCTRootView的initWithBridge: moduleName: initialProperties:函數切入。閱讀源碼可由此開始逐步調試，梳理脈絡。建議關注主流程，適當跳過技術上的細枝末節，避免深陷其中。
二、ReactNative代碼目錄分析
ReactNative項目目錄.jpg
- ReactNative項目主體是一個JavaScript（or TypeScript）工程：
- js目錄為業務代碼；
- ios/android目錄為原生模塊；若采用混合開發，可通過git子模塊形式把ios/android原生工程添加入主體項目
- node_nodules目錄是項目集成的第三方庫
ReactNative框架目錄.jpg
- ReactNative項目第三方庫位于node_nodules，其中node_nodules/react-native目錄下便是我們分析的重點，包含了JS模塊、iOS和Android獨立/公共模塊、react-native依賴的第三方庫信息等。
- Libraries：源碼核心部分，包含原生端導出的封裝為js版本組件、通信Bridge、渲染模塊……
- React：iOS原生層（ReactAndroid為Android原生層）
- ReactCommon：原生底層iOS/Android公共層，純C++編寫。
- jsi：JavaScriptCore為默認JS引擎。jsi是對JavaScriptCore的封裝，提供更加通用接口，達到隔離效果，使用者已經意識不到JavaScriptCore的存在了。
- jsiexecutor:基于jsi的js執行器
- yoga：facebook的跨平臺布局庫，用于渲染階段計算視圖布局信息
- cxxreact：Native&JS通信的核心模塊
- third-party：ReactNative源碼原生部分依賴的第三方庫，主要是folly。
- folly是facebook出品的c++11功能增強和擴展庫。c++為靜態語言，folly增加了C++的動態特性，得益于此，底層基于C++的ReactNative才可以與動態語言JavaScript無縫銜接。
- 其他庫主要是作為folly的依賴
三、ReactNative項目架構分析
ReactNative項目架構圖.jpg
1.架構層次說明
- 一個使用ReactNative的項目，按照框架依賴關系/調用關系劃分，大致架構如上圖所示，從底層到頂分析
- 系統層：即iOS平臺提供的官方庫
- ReactNative框架層：即facebook的ReactNative框架集合，這一層包羅萬象，使用語言眾多，是這一系文章的重點分析對象。
- 項目業務層：包括Native業務、JS業務，即是我們日常開發寫碼的一層。ReactNative支持混合開發，可封裝原生控件、原生模塊（eg：推送、分享、定位…）并導出到JS端使用。通常情況下，即使是純ReactNative開發，也需要編寫一部分原生業務，例如ReactNative沒有成熟可定制第三方分享，這就需要原生端集成封裝再導出到JS端使用。
2.ReactNative框架層分析
- JavaScriptCore是iOS系統框架WebKit的內建JS腳本引擎，它支持JS&Native交互。在app使用WebView渲染內嵌網頁，也是基于它，只不過UI的繪制、渲染最終都還是瀏覽器來完成，用戶體驗欠佳。
- ReactNative則是在JavaScriptCore的基礎上構建一座橋梁（Bridge），使得Native與JS高效且便捷地互相調用，這便是ReactNative框架的核心。通過Bridge，原生層可以封裝豐富的功能模塊導入Bridge供JS端調用，JS端也可以封裝功能模塊導入Bridge供原生端調用。
最終我們以React的模式來開發（JSX、props、State……），業務邏輯在JS端書寫，JS端計算完畢調用原生端導出的功能模塊接口把計算結果輸送到原生端，驅動原生端完成UI繪制、網絡、定位等一系列功能，并在需要時調用JS端導出的功能模塊、callback等給予JS端反饋。即：通過React模式做業務開發卻達到了原生開發的用戶體驗。
這個創造性的想法打開了一扇大門，使得JavaScript社區中各種框架/工具（eg: React、Redux……）可以在客戶端開發中發揮他們強大的威力。
- React的開發模式本身是非常高效（特別是UI搭建），再加上跨平臺特性，使得ReactNative在很多業務場景下是很先進的生產力。
