深入淺出掌握React 與 React Native這兩個框架

首頁>技術>Echa攻城獅2020-03-30 14:34

深入淺出掌握React 與 React Native這兩個框架

此係列文章將整合我的 React 視訊教程與 React Native 書籍中的精華部分，給大家介紹 React 與 React Native 結合學習的方法。

1. 軟體開發語言與框架的學習本質

我們在開始系列文章的技術點內容前，花一點時間探討一下軟體開發語言以及框架的學習本質，相對於整個技術點的講解，花這一點一起思考的時間是值得的。

相信看此係列文章的朋友都已有了非常多的軟體開發經驗，而當我們回顧語言與框架的學習過程時，所有語言的基礎語法都大同小異，無非基礎資料型別、條件判斷、分支判斷、迴圈處理等等。而差別或者說最重要的是在框架的底層本質，也就是為什麼會產生此框架、底層的優勢是什麼、為什麼不用別的框架、框架的底層與裝置之間是如何實現通訊的等等。

截圖

我們在開發的過程中，遇到的一些基礎語法問題、框架使用問題，基本上只要靈活使用一下搜尋引擎都能找到答案，有句話說：你要相信你遇到的技術難題在這個世界上肯定有其他人也遇到了。

而當我們需要抓住本質，對語言與框架有更加深入地了解、進行技術選型時、知道每一種技術的優劣、當框架的表現出現了一些詭異問題時會迅速定位問題、優化專案的效能，以及成為某一領域的專家時，最高效的學習方法就是直接去接觸語言與框架的底層本質。

如 JavaScript 中的深拷貝與淺拷貝，如果只是進行資料型別的深拷貝與淺拷貝，即使你忘記了處理邏輯，你只要通過搜尋引擎搜尋就可以找到很多的實現方法，而如果你想一次掌握好此知識點，那麼就需要你直接去學習資料結構以及資料型別對應的值型別與引用型別的區別，只有在掌握此部分的知識點後，在遇到資料型別的「詭異」表現時你才能抓住問題本質。

再如你在使用 React Native 框架提供的各種元件與 API，如訪問移動裝置的相簿與攝像頭、震動、GPS 定位、網路狀態、訊息推送以及整個 React Native 框架生態下提供的成千上萬的第三方功能元件時，其實底層都是 React Native 框架與 iOS、Android 平臺通訊的實現。在原理章節掌握了原理後，後續的章節我們還會一起自己動手來實現一個與 iOS、Android 平臺通訊的自定義元件。

學習、精通語言與框架最好的方法就是直接掌握其最本質的部分。

2. React 與 React Native 框架簡介

React 框架最早孵化於 Facebook 內部，作為內部使用的框架，在 2011 年的時候 React 框架被用於 Facebook 的新聞流並於 2012 年使用在了 Instagram 專案上。在 2013 年五月美國的 JSConf 大會上，React 框架專案被宣佈了開源。

在移動開發方面，Facebook 曾致力於使用 HTML 5 進行移動端的開發，最終發現與原生的 App 相比，體驗上還是有非常大的差距，並且這種差距越來越大，特別是效能方面的差距。最終，Facebook 放棄了 HTML 5 的技術方向，結合之前介紹的 React 框架的發展歷史，2015 年 3 月，Facebook 正式釋出了 React Native 框架，此框架專注於移動端 App 的開發。

React 作為構建高效能 Web 應用的框架，React Native 作為構建跨 iOS 與 Android 平臺 App 應用的框架，極其繁雜的開發生態造成了很多朋友對 React / React Native 框架產生了些許誤解，認為框架太過龐雜混亂，造成了學習成本與開發成本的增加。

此係列文章將帶領大家深入探究 React 與 React Native 框架的本質，只有在掌握了框架本質後，才能快速地領略到這兩個孿生框架的核心，不僅可以在這兩個框架間靈活切換學習，還可以不被繁雜的框架生態所矇蔽，最終達到以不變應萬變的境界。

3. 將 React 與 React Native 結合在一起學習

從上面的 React 與 React Native 簡介即可看到，兩個框架算是孿生專案，而 React Native 的底層也就是 React 框架。

截圖

React 框架使用 JSX（JavaScript eXtension，可以理解為看起來像 HTML 的 JavaScript）指定 React 元件的輸出定義，而邏輯函式的部分依然是採用 JavaScript ES6 來編寫，所以對於前端開發人員來說上手非常地容易。

編寫的程式碼通過 React 框架渲染在 Web 瀏覽器中執行，所以 React 可以用來開發 Web 專案，當然藉助第三方的元件還可以開發桌面專案，這些我們在後續會進行相關介紹。

React Native 依然由 JSX 進行元件佈局的開發，框架中元件開發的原理與思想與 React 框架一致，而且底層都由最重要的 state 進行驅動。

React 與 React Native 除了在編碼表現層都使用 JSX 語法外，在 React 與 React Native 的底層都有 Virtual DOM 與 DOM 之間的對映與轉換，以實現了頁面元件高效更新的前端表現。

截圖

使用者看到的表現層（Browser DOM）的更新，底層都是由 state 驅動了 Virtual DOM 進行變動前與變動後的比較，最終將需要重新渲染的 DOM 進行渲染展示。

而這種通過只修改 state (Model) 值引起 HTML (DOM) 變化的框架設計模式就是我們熟悉的 MVVM (Model-View-ViewModel) 模式。

以前我們可以通過直接操作 HTML 元素的形式進行頁面的更新，如下面的這段 jQuery 程式碼。

$(&#39;#container&#39;).text(&#39;Updated Content...&#39;)

當這樣的程式碼在頁面更新非常複雜的專案中使用時，你會疲於通過操作 DOM 元素更新，對映後臺大量的資料更新。

截圖

而 MVVM 模式，如目前的前端框架 Vue、Angular 和我們介紹的 React 都是基於此設計模式，將頁面呈現 View 與後臺的資料模型 Model 進行了分離解耦，使得我們只需要專注於 Model 的處理，通過修改 Model 中的屬性值，引起前端 View 的變化，不過 React 預設的資料繫結方式是單向繫結，這一部分的差異我們後續章節會展開討論。

對於 MVVM 模式的體驗以及如何通過修改 Model 引起 View 的更新，大家可以檢視下一小節，我會給大傢俱體的程式碼演示。

而目前的移動端開發方面，「原生開發」是指 iOS 平臺通過 Objective-C 或 Swift 語言開發並通過 Xcode 編譯打包釋出 iOS App，Android 平臺通過 Java 語言開發並通過 Android Studio 編譯打包釋出 Android App。

通過下圖我們可以看到「原生開發」的學習成本以及後期 App 維護的成本，而 React Native 則是通過 JavaScript 開發，然後通過框架提供的與對應平臺之間的 bridge 進行通訊，實現了只用一套程式碼可以直接部署到 iOS 與 Android 平臺並編譯出對應平臺的 App。

截圖

並且 React Native App 頁面佈局直接通過 HTML 和 CSS 的前端基礎技術進行佈局與開發，大大降低了學習成本。

你如果早就在心裡有開發一個自己 App 的想法，而剛好你有前端開發的技能，React Native 一定會是你孵化自己 App 最好的選擇。

4. 系列文章的內容範圍

本系列文章會從 React 的基本使用方法開始，並會講解到 React 的底層原理，並從一些實際案例中探討出 React 底層對於前臺表現的原因。底層原理會結合獨立的演算法以及 React 框架的原始碼進行詳細解釋。

之後會講解演示 React Native 的基本使用，同時會解釋 React Native 框架與 React 框架的關係、React Native 的效能問題、以及 React Native 與 iOS、Android 平臺通訊的原理，拋卻 React Native 紛雜的各種類庫，直達 React Native 的底層原理，掌握了原理後才能看懂所有表象的類庫實現原理。並會動手自己實現 iOS 平臺與 Android 平臺的自定義元件，深入掌握各種第三方元件的實現原理。