React Native學習方法論

時間 2019-11-09

標籤 react native 學習方法論欄目 React 简体版

原文原文鏈接

這是我技術公衆號的第一篇文章，也是React Native系列文章的第一篇，對個人文章感興趣的能夠加我微信16230091進行關注。前端

本文表面上講React Native（如下簡稱RN），實際上對於學習任何語言和系統都適用。面試

對於新技術的學習，分爲兩種，一種是語言，相似Swift、Objective-C、Java、ES6，另外一種是系統，好比Android、iOS、前端。算法

1. 語言層面，若是你精通某一門語言，那麼是能夠很快切換到另外一門語言的。這就是語言的相通性。翻開市面上那些21天精通某某語言之類的書籍，你會發現，它們具備不少共通的地方：數據庫

變量
類型
l 運算符
l 流程控制語句（if、for、while、swicth）
l 字符串操做
l 集合（數組、字典等）
l 函數（參數、返回值等等）
l 面向對象編程（類、接口、抽象類、屬性、繼承、多態、、重載、重寫等等）
l 反射
l 結構體、枚舉
l 異常捕獲
l 多線程編程
l 函數式編程

不管是Java、Objective-C，仍是Swift和ES6，基本都被上面這些點覆蓋，因此常常有老司機說說本身是Android領域作了不少年，而後一兩個月就進入到iOS領域，但這僅僅是語言層面的。編程

對於從一門語言切換到另外一門語言，我這些年來的經驗是，把23個設計模式用這門新語言全都實現一遍，基本你就掌握了這門語言的大部分特性了。設計模式

我是9年經驗的C#技術出身，我起初對Java的Interface回調方法也很不理解，是經過親手寫了一個策略模式，牢記於心。我對Objective-C中的delegate語法也曾經一度感到很彆扭，也是經過編寫適配器模式後，纔想明白的。數組

2. 系統層面。這個部分就沒那麼簡單了。你能夠花一個月學會一門語言，可是想把Android或iOS搞明白就須要幾年時間的積累了，每一個領域都有本身獨特的文化：性能優化

l 好比iOS的Runtime技術，iOS全部的技術體系都圍繞着Runtime而展開。微信

l 好比Android的四大組件，以及背後的AMS、PMS，進而延伸到AIDL和Binder機制。網絡

l 好比前端的幾十種框架，從JS打包、CSS打包，到SPA、Hybrid等若干思想的演進歷史。

因此每一個領域都是須要沉澱幾年，沒發過幾回版，或者熬到半夜修改其中的bug，是難以理解這個領域中的酸甜苦辣到。

可是，當你在Android、iOS、前端這幾個領域都作過一遍以後，你會發現，它們也是有相同的東西的，咱們一個個分析。

首先是一些基本的點：

l 基本控件、事件綁定

l 列表

l 網絡請求封裝

l 頁面跳轉

l 本地存儲（數據庫、文件）

l 頁面的生命週期

l 自定義組件

其實作App，只要會作兩種頁面就夠了，列表頁和詳情頁，你會發現，任何App，都是這兩種頁面的循環往復，首頁、產品列表頁、產品詳情頁、訂單填寫頁、支付頁、訂單列表頁、訂單詳情頁。這是一條主線。

這其中，在列表頁，須要知道怎麼把數據綁定到ListView上，怎麼上拉分頁。在詳情頁，須要知道幾個基本的控件，Button、Label、輸入框、單選框，基本就夠了。而後你還要知道怎麼點擊控件觸發一個方法，怎麼發起一個網絡請求並處理返回的數據。掌握了這些，一個頁面內的事情就都搞定了。

只有一個頁面不夠啊，因此要學會頁面跳轉，從A頁面跳轉到B頁面，至此，App就「活」了。

l 模塊化拆分

功能開發多了，好比網絡請求，你會封裝出幾個類，專門處理網絡請求，與業務邏輯無關，這時候就須要把這幾個類放到一個單獨的項目中，Android稱之爲Library，iOS稱之爲靜態庫，你的App保持對這個Library的引用。

再接着，業務多了，好比吃喝玩樂四大模塊，爲了能讓項目編譯更快，爲了團隊之間相互不干擾，就須要把這些模塊都拆分紅Library，各自模塊在平常開發過程當中，既能做爲獨立的App調試，又能在發版本時融合在一塊兒。Android用到了Maven，iOS用到了CocoaPods來解決這類問題，咱們稱之爲模塊化拆分，也稱爲組件化拆分。

以上種種，在前端根本不是什麼難事，各個模塊的腳本能夠各自打包下載分發。

l 插件化和熱修復

都是爲了解決線上bug的修復，或者快速發版而不經過市場的審覈。

l MVP和MVVM

起初Android和iOS都是基於MVC的，隨着App越作越複雜，發現MVC很差用了。我是13年的時候在作電影院選座邏輯的時候就發現MVC搞不定這事了，由於我要寫四五十種單元測試case，來保障每次修改繁雜的選座邏輯，不會影響以前運行良好的功能，可是MVC的Controller層把UI邏輯和數據邏輯混在一塊兒，而致使我沒辦法寫單元測試。由於當時我剛從微軟的WPF/Silverlight技術轉到App技術，因此天然就把WPF的MVVM思想引入了App中。時至今日，五年時間，MVP和MVVM思想已經深刻人心，不管是Android仍是iOS，抑或是前端的Angular、Vue和React，都是如此。

l 推送、埋點、性能監控、崩潰統計

這些技術點，都是企業App開發所不可或缺的技術，顧名思義，這裏很少介紹。

看到這裏，你也許會問，怎麼還沒講React Native啊？若是我說這篇文章已經接近尾聲了。你會不會打我？

關於如何學習React Native，都在上面的內容中。爲了避免讓廣大的讀者說我故弄玄虛，我仍是結合前面列舉的清單，梳理一下React Native的學習方法。

1. 語言層面，須要把ES6看一遍。但也不必全看，不少高級語法短時間你是用不到的。掌握我上面列舉的語言類清單的內容就夠了。

因此當你爲…或bind(this)這樣到語法搞得三尸神暴躁的時候，那是你緣木求魚了。就好比說bind(this)這樣的語法，也許看RN中按鈕的綁定方法，會理解的更透徹一些。

此外，網上講解ES5的文章不少，會和ES6混在一塊兒，對於初學者是個很大的障礙，我就曾經花了不少冤枉時間在上面。

2. 系統層面

這裏主要是對React的快速學習，能夠參照我上面列舉的那幾個關鍵點，再發一遍：

l 基本控件、事件綁定

這裏比較有趣的就是按鈕，它在React中其實並不存在。

l 列表