React Native学习方法论
Posted 包建强的无线技术空间
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native学习方法论相关的知识，希望对你有一定的参考价值。
这是我技术公众号的第一篇文章，也是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 列表
l 网络请求封装
有必要像封装Android和iOS网络框架那样，封装出一个React的网络框架来给开发人员使用。
l 页面跳转
React提供的页面跳转机制太复杂，有必要把它进行封装。
l 本地存储（数据库、文件）
访问SQLite和Realm
l 页面的生命周期
Component的生命周期，尤其是props和state这两个值的读写
l 自定义组件
主要是父子组件之间怎么进行通信。
至此，你就可以开发出一个简单的RN应用了。但是还没完，想做一个完整的RN应用，还需要下面的技术：
3. 打包
把RN的js脚本打出bundle包，手动放入App中，然后线上实现增量更新。
4. 集成到App
使用RN的很多场景，是在原有的Android或iOS应用中的某个模块，使用RN来编写。这时，如何在现有项目中集成RN，是我们所需要解决的。
集成进来后，App和RN中间的相互跳转页面、相互调用方法，是我们需要解决的。
5. Redux
对于复杂的React Native应用，需要使用Redux进行解耦。
写到这里，React Native的全貌就都展现着读者面前了。有人会觉得React Native太庞大太复杂，但如果按照我的这个学习方法论，把上面这些点都扫一遍，一个月时间左右，基本就能搞定一款App了。
接下来我会有一系列文章和例子来介绍React Native，这是我这一年来做线下培训的教案。我面对的都是些什么学员呢？有没接触过React Native的前端人员，有转型为React Native的Android和iOS开发人员，所以我比较清楚怎么把我文章中的这些知识点，灌输给他们。
最后是一波广告，我现在每天晚上8点在腾讯课堂做Android和iOS技术直播，涉及以下领域：
l Android和iOS组件化拆分
l App性能优化
l App瘦身
l Android插件化
l Android和iOS热修复
l iOS内存管理
l iOS Runtime
l 设计模式
l RxJava
l 注解编程
l AOP
l ReactNative
l Swift
l App自动化测试
l 面试算法题
对我的文章和培训课程感兴趣的同学，可以加我微信16230091进行关注。
以上是关于React Native学习方法论的主要内容，如果未能解决你的问题，请参考以下文章