一次掌握 React 與 React Native 兩個框架

来源:https://www.cnblogs.com/parry/archive/2018/09/14/intro_react_and_reactnative.html
-Advertisement-
Play Games

此系列文章將整合我的 React 視頻教程與 React Native 書籍中的精華部分，給大家介紹 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 代碼。

$('#container').text('Updated Content...')

當這樣的代碼在頁面更新非常複雜的項目中使用時，你會疲於通過操作 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 平臺的自定義組件，深入掌握各種第三方組件的實現原理。

我的「React.js 入門與實戰」視頻教程：http://coding.imooc.com/class/83.html

我的《React Native 精解與實戰》書籍：http://rn.parryqiu.com/

5. 小結

這一小節給大家描繪了整體安排以及學習的本質，接下來我們會先從 React 底層原理開始，掌握好這兩個框架最本質的部分。

任何知識的學習過程都不會是「舒服」的過程，只有跳離自己的舒適區，才能有進步，所以遇到任何疑問或想交流的問題，大家只需在文章下留言即可，我都會與大家交流。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML5與CSS3權威指南筆記案例1
    第1章 第2章 與`time`結合使用 多個 元素 元素 元素 添加 元素 元素 網頁 屬性 往後餘生，唯獨有你 簡書作者：達叔小生 90後帥氣小伙，良好的開發習慣；獨立思考的能力；主動並且善於溝通 簡書博客： "https://www.jianshu.com/u/c785ece603d1" 結語 ...
  • 在vue-cli中使用layer中的layData日期組件
    有朋友問我怎麼在vue-cli項目中使用layui中的layData組件，有時間從網上查了下寫下篇文章。 ...
  • JS學習筆記：JS 的function( window, undefined ) {}(window)寫法
    JS 的function( window, undefined ) {}(window)寫法 (function( window, undefined ) {})(window);這個，為什麼要將window和undefined作為參數傳給它？ (function( $, undefined ) { ...
  • 視差滾動-background-attachement
    之前項目中沒有涉及到視覺滾動的網站，但是畢竟是一種常用的網站類別，不得不瞭解。實現方法很簡單，做一下簡單的分析。。。 概述：滾動視差是指多層背景以不同的速度移動，形成立體的運動效果，來帶非常出色的視覺體驗。 屬性：background-attachment ，決定背景在視圖中形態(固定、隨區塊固定) ...
  • JavaScript字元串
    JavaScript 字元串 JavaScript 字元串 JavaScript字元串用於存儲和處理文本。 字元串可以存儲一系列字元，如"HAHA"； 字元串是可以插入到引號中的任何字元，可以使用單引號，也可以使用雙引號。 例如： 可以使用索引位置來訪問字元串中的每個字元； 字元串中的索引是從0開始 ...
  • Vue路由跳轉到新頁面時 預設在頁面最底部 而不是最頂部 的解決
    今天碰到一個問題 vue路由跳轉到新的頁面時會直接顯示頁面最底部 正常情況下是顯示的最頂部的 而且好多路由中不是全部都是這種情況 折騰好長時間也沒解決 最後在網上找到瞭解決辦法 其實原理很簡單 就是在頁面載入完畢後 把滾動條的距離設置為（0，0） 就解決了 很不理解的就是為什麼會出現這種情況呢？ ...
  • sass變數
    sass變數用法 1、sass變數必須以$符開頭，後面緊跟著變數名 2、變數值和變數名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣） 3、如果值後面加上!default則表示預設值 預設變數 sass的預設變數：僅需要在值後面加上!default即可。 scss.style css.sty ...
  • vue 格式化銀行卡（信用卡）每4位一個符號隔斷
    問題 在做銀行卡輸入框時有一個需求如題，這裡舉例用 隔斷 調查 查看了很多大公司網站的銀行卡輸入，發現還有有很多缺陷的： 有的是在中間刪除，游標會跳到最後； 有的是能刪除掉中間隔斷符的； 等等，邏輯感覺比較混亂，或者是我不懂他們的高深設計吧。 只有支付寶的設計感覺是比較合理的，改變了只有輸入框的固有 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類